jQuery ile Yukarı Çık Butonu Nasıl Yapılır ?

Bir web sitesine Scrollbar aşağıya doğru kaydıkça sitenin üst kısımlarına dönmeyi kolaylaştıracak “Yukarı Çık” butonu koymak iyi fikir gibi geliyor.Hem sitenin üst kısımlarını kullanıcıya hatırlatacaktır hem de görünmeyen üst kısımlarda slayt vs. gibi değişken haberler bu buton vesilesiyle daha verimli kullanıcı ilgisine maruz kalacaktır.

Bu yazımda sizlere paylaşacağım JQuery kodları ile bu işlemi animasyonlu bir şekilde gerçekleştirebileceğiz.

jQuery Kodu

$(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;
    });
});

Şüphesiz internet sitelerinin en çok kullandığı uygulamalardan bir tanesidir mouse ile buton yada linklere tıklandığında sayfanın yukarı doğru hızlı bir şekilde kayması. Şuan kullandığım temamda da aynı özellik bulunuyor. Özellikle çok uzun sayfalarda ziyaretçiler için oldukça faydalıdır. Kendime alışkanlık edindiğim için bazı sitelerde gezinirken sayfanın en altına geldiğim anda yukarı çıkma butonlarını arar dururum. Kimileri web sitenin en altına ekler kimileri de sayfa aşağı kaydığında görünen ve sayfa ile beraber aşağı yukarı doğru kayan şekilde eklerler. Sayfayı el ile aşağı indirdiğinizde buton görünür tekrar yukarı çıktığınızda buton kaybolur. jQuery scrollUp eklentisi de böyle bir örneği sitenizde kullanmanıza yarıyor.

CSS Kodu

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

Bu şekilde bir kodlama ile istediğimiz elemente tıklandığında scroll’u en tepeye animasyonla taşıyoruz.
Bloğuma da bu uygulamayı eklemiş bulunuyorum. Bu uygulamada kolaylık sağlayan en önemli nokta ScrollTop özelliği. Bu özellik ile herhangi bir elementin en tepeye olan uzaklığını elde edebiliyoruz veya en tepeye olan uzaklığını ayarlayabiliyoruz. Bu özellikten faydalanarak sayfamızı en üst noktaya taşıyoruz. Ayrıca taşıma işlemini gerçekleştirecek olan elementin görünürlüğünü ise yine bu özellik sayesinde belemekteyiz.