Tombol Back to Top dengan jQuery

1. Login ke Blogger => Design => Edit HTML
2. Sebelum merubah template kita, ada baiknya download template kalian untuk berjaga-jaga.
3. Klik / Centang Expand Widget Template.


4. Cari kode ]]></b:skin> dan masukkan kode berikut ini diatasnya.

/* -------------- * ToTop * ------------------- */
#ToTop {
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -80px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 100px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
cursor:pointer;
color:#fff;
font-family:verdana;
}

5. Cari kode </head> dan masukkan kode berikut ini diatasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $(&#39;#ToTop&#39;).fadeIn();   
        } else {
            $(&#39;#ToTop&#39;).fadeOut();
        }
    });

    $(&#39;#ToTop&#39;).click(function() {
        $(&#39;body,html&#39;).animate({scrollTop:0},800);
    });   
});
</script>

6. Terakhir, kita masukkan kode dibawah ini di atas kode </body> :

<div id='ToTop'>^ Back to Top</div>

7. Save Template.

Refferensi: Agyuku.