Make Back To Top Button With Jquery For Blog

Jika sebelumnya saya telah menjelaskan 2 cara membuat tombol back to top, sekarang saya akan menambahkan cara membuat tombol back to top dengan jquery.
Jika dibandingkan dengan tombol sebelumnya yang terus berada on the top, yang ini beda. Maksudnya beda adalah ketika kita berada dihalaman atas tombol back to top ini tidak terlihat dan ketika kita scroll mouse ke halaman bawah tombol ini baru ada. Bagus kan....?

KLIK DISINI UNTUK MELIHAT DEMO PREVIEW

Untuk membuat tombol back to top dengan jquery ini, ikuti tahap-tahapnya dibawah ini :

1. Login Ke blogger kalian
2. Pilih Rancangan ---> EDIT HTML (centang expand template widget)
3. Simpan kode berikut sebelum kode ]]></b:skin>

#top-link{display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:#000; color:#fff; text-shadow:1px 1px 1px #666; font-size:11px; position:fixed; right:-20px; bottom:150px; padding:5px; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px}

Keterangan :
== background:#000; ---> Latar belakang/background berwarna hitam
== color:#fff; ---> tulisan back to top berwarna putih
== right:-20px; bottom:150px; ---> Posisi berada dibawah sebelah kanan
== -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px ---> sudut Tombol melengkung
== Untuk melihat kode HTML warna silahkan KLIK DISINI
== Jika kalian kurang mengerti tentang sudut melengkung kalian bisa melihat DISINI


4. Sekarang simpan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script src='http://z33s.googlecode.com/files/kaluhur.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() &gt;= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function() {
$(&#39;#top-link&#39;).topLink({
min: 300,
fadeSpeed: 500
});
$(&#39;#top-link&#39;).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

5. Tahap selanjutnya adalah pemanggilan dan pembuatan tombol back to topnya. Kalian simpan kode berikut tepat diatas kode </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

Keterangan :
== Jika ketika di Klik tombol back top ga bekerja (ga mau kembali ke atas) kalian ganti kode #top dengan # sehingga hasilnya seperti ini :

<a class="no-click no-print" href="#" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

6. Simpan template kalian

Selamat mencoba dan semoga bermanfaat.