Scroll Top - sayfada yukarı çık uygulaması (jQuery)

3,978 Kez Okundu
Html Css Js
2 Yorum
2015-07-15 01:25:31

Uzunca bir yazıdan oluşan sayfada aşağı indiğinizde yukarı çıkmak için zaman zaman zorluk çekilir. Bunun için sayfa içerisine yukarıdayken görünmeyecek, aşağı doğru inmeye başladığınızda sağ tarafta görünecek bir buton ile bu zorluğun üstesinden kolayca gelinebilir.

Öncelikle kullanılacak ikon dosyasını belirtelim

Sonra CSS dosyamiza sitilimizi ekleyelim

Konumu sağ alt köşede ve görünmez olsun

#ScrollTop{
    position: fixed;
    right: 20px;
    bottom: 15px;
    cursor: pointer;
    display: none;
}

İkona tiklandiginda sayfayi yukarıya kaydiralim

$("#ScrollTop").click(function() {
    $("html,body").stop().animate({ scrollTop: "0" }, 1000);
});

Sayfa yukarı çıktığında ikon görünmez olsun, aşağıya indiğinde görünür hale gelsin

$(window).scroll(function() {
    var length = $(document).scrollTop();
    if (length > 300){
        $("#ScrollTop").fadeIn(500);
    }
    else{
        $("#ScrollTop").fadeOut(500);
    }
});