Membuat Scroll To Top Button

Siang ini aku share cara Membuat Scroll To Top Button yang letaknya di bab bawah blog. Kegunaan tombol ini sesuai dengan namanya scroll to top yaitu menscroll halaman blog kembali ke bab atas blog. Dengan mengklik Scroll To Top Button secara otomatis halaman kembali ke bab atas sehingga pengunjung tidak usah menscroll dengan mousenya. Membuat Scroll To Top Button bisa disimpan di sebelah kiri bawah atau kanan bawah. 

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

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

Catatan:

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

Scrool to Top ialah goresan pena yang tampak pada tombol, dapat Anda ganti dengan Back To Top atau lainnya.

Demikian sharing Membuat Scroll To Top Button pada kali ini, mudah-mudahan bermanfaat.

Sumber https://www.kompiajaib.com/

Share this post