WordPress Yukarı Çık Butonu Ekleme

Yukarı çık butonu sayfanın derinliklerine inmiş olan ziyaretçilerinizin kaydırma çubuğuyla işkençe çekmemesi için internet sitelerinin kullanıcı dostu olmazsa olmaz özelliklerindendir. WordPress yukarı çık butonu özelliği yani orjinali wp to top olan bu özelliğini çoğu kişi eklentili olarak kullansa da yukarı çık özelliğini eklentisiz olarak yapmak mümkün.

WordPress Yukarı Çık Butonu Ekleme 

Yazı Şeklinde “YUKARI ÇIK” diye sayfanın altında belirtmek istiyorsanız footer.php dosyanıza

<a href="#" >YUKARI ÇIK</a>

şeklinde yazmanız yeterlidir. Ancak bu bana basit kaçar ben JQUERY kullanarak hem yukarı çıkarken geçişleri yumuşatmak istiyorum hemde biraz olaya görsellik katmak istiyorum diyorsanız. CSS KODLARI:

#yukari
{z-index:100;position:fixed;bottom:10px;right:10px;display:none}
#yukari_boyut
{width:50px;height:50px}

JQUERY KODLARI

  
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100)
                    $("#yukari").fadeIn(500);
                else 
                    $("#yukari").fadeOut(500);
            });
            
           $(document).ready(function(){
                $("#yukari").click(function(){
                    $("html, body").animate({ scrollTop: "0" }, 500);
                    return false;
                });
            });
        

HTML KODLARI



<div id="yukari"><a><img id="yukari_boyut" title="Yukarı Çık" src="/yukari.png" alt="Yukarı Çık" /></a></div>


Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir