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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_TBwYaGYx4KgjuPdamIp5CcR3E5RUermnr2KQKbmCRNtN6UHx61sfwOyedOa0RQ1GmWyrfE36jn4_O1UvBZ7G6dU01uNKaShhMCuwtY2kULHx2GHBSuWzL6q4pwKgQBjPGuYHfEGwNzR/s1600/Button-Upload-icon.png' title='Back To Top' />
</div>

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

DEMO

Pastikan Anda sudah menambahkan jQuery di dalam template.