Scroll Top - sayfada yukarı çık uygulaması (jQuery)
- 4,357 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);
}
});
