JQuery ile Yukarı Çık Butonu
Jquery ile web sayfalarımıza scrollbar aşağıya kaydıkça sitenin üst kısımlarına geri dönmeyi kolaylaştırmak için "Yukarı Çık" butonu koyarak üst kısımlara kısa yoldan erişebiliriz.
Css kodumuzda "Yukarı Çık" butonumuza stil tanımlıyoruz.
.backToTop{
position: fixed;
bottom: 10px;
right: 10px;
background: #ff6000;
color: #fff;
padding: 10px;
display: none
}
Html kodumuzda "Yukaru Çık" butonumuzu tanımlıyoruz.
Yukarı Çık
Jquery kodumuzda scroll değeri 50'den yüksekse Yukarı Çık butonum görünecektir. Eğer değilse Yukarı Çık butonum gizlenecektir.
$(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$(".backToTop").fadeIn(400);
} else {
$(".backToTop").fadeOut(400);
}
});
)};
Jquery kodumuzda ise Yukarı Çık butonuna tıklanınca en üste çıkmasını sağlıyoruz.
$(function(){
$(".backToTop").click(function () {
$("html, body").animate({ scrollTop: "0" }, 500)
});
)};