Menambahkan Scroll To Top di Blogger dengan Animasi

Sudah tahu scroll to top kan? Sebuah tombol untuk menggulung (scroll) layar kembali ke atas. Jadi, ketika Anda sudah sampai di bagian bawah (paling bawah) sebuah halaman web tombol ini akan muncul.

#scrolltoTop {
    text-align:center;
    position:fixed;
    bottom:15px;
    right:80px;
    cursor:pointer;
    display:none;
}


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

<script type='text/javascript'>
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#scrolltoTop').fadeIn();
        } else {
            $('#scrolltoTop').fadeOut();
        }
    });
    $('#scrolltoTop> 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);
    });
});
</script>


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

HTML


<div id='scrolltoTop'>
    <img alt='Back to top' src='http://4.bp.blogspot.com/-JbaDT9YqsI8/UQu-cM05oVI/AAAAAAAADb8/wytlgtHS8sU/s1600/Button-Upload-icon.png' title='Back To Top' />
</div>


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



Pastikan Anda sudah menambahkan jQuery di dalam template.

Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template