Smooth Scrolling Dengan JQuery

Fitur ini merupakan bagian dari fitur navigasi blog,dimana berguna bagi pengunjung untuk memudahkan dalam menjelajahi artikel di blog kita.
Jika dalam sebuah artikel didalam blog kita terlalu panjang kebawah,dengan Smoth Scrolling ini pengunjung akan dengan mudah terbantu untuk kembali ke top page dengan cara klik tombol.
Namanya Smooth Scrolling atau lebih tepat diartikan memutar dengan halus ke atas,efek “smooth” ini karena fungsi animasi yang dibuat dengan jQuery.

Fungsi scrolling ini sebenarnya sudah tidak asing lagi,namun jika ingin menggunakan efek scroll yang halus berikut caranya.

Langkah pertama tentu saja kamu harus login kedalam dashboard blogger -> Template -> Edit HTML.
Carilah Tag ]]</b:skin> dan pastekan code CSS berikut ini diatas Tag ]]</b:skin>:

#go-to-top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#go-to-top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Langkah ke 2 ,temukan tag </head> dan pastekan code berikut sebelum/diatas tag </head>
Catatan: Jika Code <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script> sudah terdapat didalam template Blog Kamu,maka tidak perlu dipasang lagi.Jadi kamu hapus saja yang terdapat didalam code berikut.

/*———-Start Smooth Scrolling Script————–*/
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script>
<script language=’javascript’ type=’text/javascript’>
$(document).ready(function(){

    // hide
    $(&quot;#go-to-top&quot;).hide();
  
    // fade in
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#go-to-top&#39;).fadeIn();
            } else {
                $(&#39;#go-to-top&#39;).fadeOut();
            }
        });

        // scroll to top
        $(&#39;#go-to-top img&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});

</script>

Masih dihalaman EDIT HTML, sekarang langkah ke 3 temukan tag </body>,pastekan code berikut sebelum atau diatas tag </body>

 <a href=’#’ id=’go-to-top’><img alt=’Back to Top’ src=’https://lh5.googleusercontent.com/_-A4vw5BwqxA/TZgn5J8U_yI/AAAAAAAAFcc/VE_uPCU4igQ/Up1Blue.png’/></a>

Terakhir simpan template Kamu,dan lihatlah hasilnya.

Happy Blogging!