Membuat Back To Top Dengan jQuery

Kali ini saya akan mencoba memberikan trik sederhana untuk membuat Back To Top menggunakan jQuery. Tidak seperti Back To Top biasanya yang bergerak secara sepontan. Dengan menggunakan jQuery ini gerak yang dihasilkan akan lebih perlahan dan lembut.

Berikut langkah-langkah pembuatannya:
1. Login ke akun Blogger anda
2. Pilih Layout > Edit HTML
3. Cari kode </head>, lalu paste kode berikut di atasnya:

<!-- SCROLLING BACK-TO-TOP -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(function(){
$(&#39;a[href*=#top]&#39;).click(function() {
if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;)
&amp;&amp; location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length &amp;&amp; $target || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
if ($target.length) {
var targetOffset = $target.offset().top;
$(&#39;html,body&#39;).animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>
<!-- SCROLLING BACK-TO-TOP END -->

4. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti ini: <body id='top'>

5. Selanjutnya, cari kode </body> dan paste kode berikut di atasnya:

<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6CuoRdZdKpzuU8Dyt_H8VLV8umJB-xxF5U00XlDUa_yia3yu8nFYdBBoWsFSOAabxDaiLT6r1OITQ5SQzWgMyoaC5U-g_j8eNnyZ2dCwPTj60ctgGVLWSL8-WLFh-80jjvJNOckNsyX4/' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>

Keterangan:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6CuoRdZdKpzuU8Dyt_H8VLV8umJB-xxF5U00XlDUa_yia3yu8nFYdBBoWsFSOAabxDaiLT6r1OITQ5SQzWgMyoaC5U-g_j8eNnyZ2dCwPTj60ctgGVLWSL8-WLFh-80jjvJNOckNsyX4/ > url gambar

right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.

6. Terakhir, klik Save Template.
7. Lihat hasilnya.

Kalau ada pertanyaan atau anda suka dengan "Membuat Back To Top Dengan jQuery" di atas silahkan masuk pada kolom komentar di bawah. Thanks.

'ngin

Timur Belambangan™

Membuat Back To Top Dengan jQuery

2 komentar

…

…

…