Takip Edin

JQUERY

Jquery Back To Top Uygulaması

featured_back to top uygulaması _ öne çıkan görsel

Bu bölümde, scroll bar ile sayfanın aşağı kısımlarına doğru gittiğimizde bizi sayfanın üstüne çıkaracak olan back to top butonu yapılacaktır.

<script>
        $(document).ready(function () {
            // Sayfanın scroll özelliği tetiklendiği zaman
            $(window).scroll(function () {
                    if($(window).scrollTop() > 100) {
                        $(".backtotop").fadeIn(); 
                    }
                    else{
                        $(".backtotop").fadeOut();
                    }            
});
            $(".backtotop").click(function() {
                $("html,body").animate({
                    scrollTop:0
                }, 700);
                return false;
            });
            
        });
</script>

Burada scroll bar, 100 px aşağı indiğinde Back To Top butonu, fade in( ) efektiyle ortaya çıkacak, 100 px ‘den daha düşük bir değere geldiğinde ise fade out( ) efektiyle görünmez hale gelecektir.

a elemanı(Back To Top butonu) için return false; ifadesini yazmasak dahi a elemanına tıkladığımızda yine sayfa başına giderdi ancak a elemanının bu davranışını return false ile iptal edip scroolTop:0 diyerek animasyonlu bir şekilde başa aldık.

$(“html,body”) ifadesi, tarayıcı farklılıklarından dolayı yazılmıştır.

Devamını oku

Popüler

error: Content is protected !!