Eklentisiz Yukarı Çık Butonu

Eklentisiz Yukarı Çık Butonu (basit)

Wordpress ve diğer tüm yazılımlar için eklentisiz yukarı çık butonu

Bazı wordpress temaları ve diğer CMS scriptlerinin desteklemediği yukarı çık butonunu basit ve eklentisiz bir şekilde nasıl entegre edildiğini hep beraber öğrenelim. Kullanıcılar için çok büyük bir kolaylık sağlayan bu özellik, web siteler için olmazsa olmazlardan olduğunu unutmayın.

Öncelik ile tema yada ana dizinde bulunan footer.php dosyasının </body> tag’ının hemen üzerine aşağıdaki kodu ekliyoruz.

<a href="#top" id="yukari-cik" title="Yukarı Çık"></a>

<script>
jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 850) {
            $('#yukari-cik') .fadeOut();
        } else {
            $('#yukari-cik') .fadeIn();
        }
    });
    $('#yukari-cik').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'fast');
        return false;
        });
});
</script>

Ardından yukarı çık butonunu css ile yapılandırmak için yine tema yada ana dizininde bulunan style.css dosyasının içine uygun bir yere aşağıdaki kodu ekliyoruz.

#yukari-cik {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
z-index:9999;
display:none;
background: url("yukari.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}

CSS kodlarının içinde ki right:100px; satırı yukarı çık butonunu sağa ve sola yaslama parametresidir. 100px değerini düşürdükce buton resmi sağa yaslanacaktır. Bu özelliği web sitenizin genişliğine göre istediğiniz pozisyona ayarlaya bilirsiniz.

Aşağıdaki görseli ise yine footer.php ve style.css dosyalarının olduğu bölüme yükleyin. Dilerseniz farklı bir görsel kullana bilirsiniz. Eğer farklı bir görsel kullanmak isterseniz style.css dosyasına eklediğiniz kodun içinde ki background: url(“yukari.png”); satırından yeni buton resim ismini ve height: 40px; ile width: 40px; satırlarını ise yeni buton resmine göre ölçülendire bilirsiniz.

Tüm bu işlemleri yaptıktan sonra artık çok şık bir yukarı çık butonu eklemiş oluyorsunuz ayrıca karmaşık ve gereksiz dosyalardan oluşan yukarı çık eklentilerinden de kurtulmuş olursunuz.

Herhangi bir sorun yaşarsanız yorum kısmından bildirin yardımcı olmaya çalışırım.

Kolay gelsin.