Jquery Smooth Scroll Back To Top Widget

Widget Back To Top pada sebuah blog adalah sebuah hal yang sudah umum digunakan dan memang banyak membantu, selain blog kecil yang menggunakan widget ini juga banyak blog/website besar yang menggunakan widget ini.

Pada kesempatan ini Juru Coding akan berbagi cara membuat widget back to top dengan jquery smooth yang sudah banyak digunakan oleh banyak situs.

Jquery smooth scroll pada widget back to top ini cukup banyak disukai karena selain support semua blog juga support pada tampilan mobile.

Contoh tampilan widget back to top pada view mobile

Untuk membuatnya cukup mudah, silahkan ikuti langkah-langkah berikut ini :
Silahkan copy kode berikut ini :

<style type='text/css'>
#MBB {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:96px;background-color: #EEEEEE;background-color:#2c3e50;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:51px;right:29px;cursor:pointer;color:#111;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr(&quot;href&quot;);
    if ($(window).scrollTop() != &quot;0&quot;) {
        $(this).fadeIn(&quot;slow&quot;)
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
    }
});
$(function() {
    $(&quot;#MBB&quot;).scrollToTop();
});
</script>
<a href='#' id='MBB' style='display:none;'>Back to Top </a>

Kemudian cari kode </body> pada tag html pengaturan template
Kemudian paste kode diatas tepat diatas </body> kemudian simpan.

Silahkan mencoba bagi yang ingin mencoba, jika menemui kendala jangan sungkan-sungkan untuk segera menghubungi Juru Coding.