Membuat Scroll To Top Button

Siang ini saya share cara Membuat Scroll To Top Button Pada Blog yang letaknya di bagian bawah blog. 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 usah menscroll dengan mousenya. Membuat Scroll To Top Button Pada Blog bisa disimpan di sebelah kiri bawah atau kanan bawah.

Membuat Scroll To Top Button Pada Blog cukup mudah,

Anda 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.

Atau juga dengan langsung di gadget Tata Letak >> Tambahkan Gadget >> HTML/Javascript.

jadi lebih muda.

berikut 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("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#w2b-StoTop").scrollToTop(); }); </script>

<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top</a>