Eklentisiz Yukarı Çık Butonu
Trendlerdeki Yazı

Eklentisiz Yukarı Çık Butonu

2

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.

buton1
yukari-cik
buton2

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.

Bu Yazıya Tepkiniz Nedir?
İlginizi Çekebilir

Yorum Yap

Yorumlar (2)

  1. 10 ay önce

    Merhaba Erdinç bey,
    Sizlere çok teşekkür ederim. Gerçekten mükemmel oldu. Bir o kadar pratik bir o kadar da basit.

Bir cevap yazın

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