Scroll to Top Animation with jQuery

Tuesday, August 20, 2013

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#backtoTop').fadeIn();
        } else {
            $('#backtoTop').fadeOut();
        }
    });
    $('#backtoTop> img').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800).animate({
            scrollTop: 25
        }, 200).animate({
            scrollTop: 0
        }, 150).animate({
            scrollTop: 10
        }, 100).animate({
            scrollTop: 0
        }, 50);
    });
});

Letakkan kode JavaScript di atas tepat sebelum kode </head>

<div id='backtoTop'>
 <img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNS4ewXNkjmaKpDWuJTDVbkmPXsIFq4-dZ82bOmgx8kTDYLVPU-asXqOjtfnyu7ph4XBP1g08YwBscfrsD6kC70CqVDPumr8J8YJZxHOGUi6-EeysFKdSq1P7bxDYRn5K8yYGMM9S4Ay7j/s1600/back-to-top.png' title='Kembali keatas!'/>
</div>

Letakkan kode HTML di atas tepat sebelum kode </body>

#backtoTop {
    text-align:center;
    position:fixed;
    bottom:0;
    right:20px;
    cursor:pointer;
    display:none;
}

Letakkan kode CSS di atas tepat sebelum kode ]]></b:skin>

Coba sendiri Demo Blogger

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini