Cara Membuat Scroll To Top Button

Cara Membuat Scroll To Top Button [ Tutorial Blogspot ]

Kegunaan tombol ini sesuai dengan namanya scroll to top yaitu menscroll halaman blog kembali ke bagian atas blog. Dengan mengklik Scroll To Top Button secara otomatis halaman kembali ke bagian atas sehingga pengunjung tidak perlu susah payah dan kerja ekstra untuk menscroll halaman dengan mousenya. Tentu ini sangat berguna untuk memanjakan pengunjung blog dan juga berguna bagi blog yang memang mempunyai tulisan-tulisan yang panjang. Membuat Scroll To Top Button bisa disimpan di sebelah kiri bawah atau kanan bawah.

Membuat Scroll To Top Button  cukup mudah, Kamu login ke dashboard blog >> Template >> Edit HTML >> Cari kode </body> ( gunakan CTRL + F untuk memudahkan pencarian ), copy kode di bawah ini dan paste DI ATAS / SEBELUM kode </body> tadi.

Ini Kodenya :

 <style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<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;#w2b-StoTop&quot;).scrollToTop();
    });
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top</a> 

Keterangan :

Perhatikan kode ini <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>, Jika kode ini sudah ada di blog kamu, berapapun versinya, maka hapus saja, tidak perlu di masukkan.

right : menandakan tombol ini disimpan di sebelah kanan, untuk disimpan disebelah kiri ganti dengan left.

Scrool to Top : adalah tulisan yang tampak pada tombol, bisa Anda ganti dengan Back To Top atau lainnya.

Demikianlah Cara Membuat Scroll To Top Button ini, mudah-mudahan bermanfaat.