Jquery

Jquery yardımıyla üste çık butonu yapma

Aşağı doğru uzun kaydırma olan sitelere sayfanın alt kısmına kullanıcıları yukarı taşıyacak bir üste çık butonu koymak kullanıcı rahatlığı açısından
çok fayda sağlayan bir yöntemdir. Kullanıcı bu sayede tek tık ile sayfanın üstüne çıkabilir. Jquery ile bu işlemin nasıl yapıldığına bakalım.

Bu işlemi 3 adımda gerçekleştireceğiz;

1- Kullanıcı sayfanın üst kısmındaysa “üste çık butonu” gözükmeyecek.
2- Kullanıcı aşağı doğru kaydırma yaptğında belirli yerden sonra üste çık butonu belirecek.
3- Son olarak kullanıcı butona tıklayacak ve üst tarafa taşınacak.

Not: işleme başlamadan önce jquery kütüphanemizin yüklü olduğuna emin olalım. Şimdi başlayabiliriz. Önce bir class oluşturalım.

<a class="ustecik"></a>

Şimdi, oluşturduğumuz class’a stil verelim. Tabii ki aynı yapmak zorunda değilsiniz. Herkesin tasarım zevki farklıdır.

CSS

.ustecik
{
/* üste çık butonunun özellikleri. butonu demo sayfasından indirebilirsiniz ya da kendi istediğiniz bir buton indirip kullanabilirsiniz.*/
    background:url(up_arrow.png);
    text-decoration:none;
    position:fixed;
    bottom:20px;
    right:20px;
    width:128px;
    height:128px;
    cursor:pointer;
    opacity:0.5;
    display:none; /* sayfa ilk açıldığında gizliyoruz */
}
/*üzerine gelindiğinde */
.ustecik:hover
{
    opacity:1;
}

Geldik en önemli yere. Butonumuzu oluşturduk css ile stil de verdik. Peki işlevi nasıl sağlayacağız? İşte burada Jquery devreye giriyor. Jquery kodlarımız aşağıdaki gibi olmalıdır.

Jquery

$(window).scroll(function(){ 
/* Kullanıcı 100'den fazla kaydırma yaparsa üste çık butonumuz gösterilecek. Aksi taktirde gizli kalacak*/
    if ($(this).scrollTop() > 100) {
            $('.backtop').fadeIn();
        } else {
            $('.backtop').fadeOut();
        }
});
$(document).ready(function() {
/* Üste çık butonuna tıklandığında bu fonksiyon çalışacak */
  $('.backtop').click(function() {
/* Sayfanın üstüne kaydırma işlemi */
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
  });
 
});

Aşağıda demo adresini inceleyebilir ya da örneği indirebilirsiniz. Bir sonraki yazımda görüşmek üzere..
[button color=black size=medium]Demo[/button]

[button color=black size=medium]İndir[/button]



Yazar Hakkında

aykutbasyigit

2008 yılında programlama dillerini öğrenerek sektöre giriş yaptıktan sonra 2012'de fikir değiştirerek yazılımı bırakıp tasarıma yöneldi. Arayüz geliştiricisi olarak çalışmakla birlikte deneyimlerini burada paylaşmakta.

Yorum Yaz