Membuat Tombol Back To Top Sederhana di Blog

Tombol back to top adalah sebuah tombol navigasi yang memudahkan pengunjung blog unruk melihat artikel atau tulisan pada blog kita. Apalagi jika tulisan kita panjang, maka pengunjung akan kerepotan untuk men-scroll tab samping layar. Cara yang terbaik adalah dengan memasang tombol back to top pada blog kita, lalu bagaimana cara memasang tombol back to top yang sederhana tapi cukup elegan? Silakan ikuti tutorialnya berikut ini :

1. Pertama kita pasang dulu css font awesome , karena back to top ini menggunakan font awesome.
Caranya pasang kode javascript berikut dan letakan diatas kode </head>, namun jika di blog Anda sudah terpasang maka abaikan step ini.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> 

2. Kemudian pasang css dibawah ini tepat diatas ]]></b:skin> atau </style>

/* Back To Top */
#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

 3. Setelah itu kita panggil back to topnya dengan memasang html dan javascript dibawah ini dan letakan diatas kode </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>           
$(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        $(&#39;#back-to-top&#39;).fadeIn();
    } else {
        $(&#39;#back-to-top&#39;).fadeOut();
    }
});

$(&#39;#back-to-top&#39;).hide().click(function() {
    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
    return false;
});
</script>

4. Terkahir simpan Template dan lihat hasilnya