Cara Membuat Tombol "Back To Top" Menggunakan jQuery

Posted by



Tambahkan "Klik Tombol Top" dengan CSS dan Jquery. Ini adalah Tombol untuk bergulir ke atas halaman ketika Sobat berada di Bagian Bawah halaman.
langsung Sob menuju ke TKP

1. login ke akun blogger Sobat
2. Pilih rancangan lalu klik Edit HTML
3. Untuk mengantisipasi jika salah backup dulu Sob templatnya
4. Centang  Expand Template Widget
5. Cari kode </body>
6. Copy kode script di bawah ini  dan Paste sebelum tag </ body> lalu simpan

<style type="text/css">
#MD-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() {
    $("#MD-StoTop").scrollToTop();
});
</script>
<a href='#' id='MD-StoTop' style='display:none;'>Scroll to Top </a>



Gimana Sob hasilnya..
semoga bermanfaat ditunggu coment-nya Sob..


Blog, Updated at: 19:33

0 Comment :

Post a Comment

Ayo Sobat jangan jadi SILENT READER ya, ? bagi dong komentarnya
jika Sobat tidak punya akun silahkan pilih Anonymous...
Dan gunakan kata-kata yang sopan ....

Search This Blog

Popular Posts