Tombol Back to Top dengan jQuery

Google menyediakan berbagai macam petunjuk membuat sebuah tombol Back To Top dalam blogger. Apakah "Back To Top" tersebut? Back to Top merupakan sebuah tombol link untuk bergerak ke atas atau awal halaman. Nah, cara membuatnya adalah sebagai berikut:

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.