Membuat Scroll To Top Button

Siang ini saya share cara Membuat Scroll To Top Button 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 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 kode </body> ( gunakan CTRL + F untuk memudahkan pencarian ), copy kode di bawah ini dan paste DI ATAS / SEBELUM kode </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 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.

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

Sumber: Making Different