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/AVvXsEinvCpWrP8P8P2d482V5mHA3cIUHjg9gp_iL4ldgEV05uCJ2p4TLx4YyAJnqv4R_rVsxvES9zYfH1ZJ1Y7PDQOlLvwYRgHfjBEQs0rahY_jSUpJ3ar50K1rHzNs7Uv6s3w_ATEtZDrua3U/' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>

Keterangan:
url gambar

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinvCpWrP8P8P2d482V5mHA3cIUHjg9gp_iL4ldgEV05uCJ2p4TLx4YyAJnqv4R_rVsxvES9zYfH1ZJ1Y7PDQOlLvwYRgHfjBEQs0rahY_jSUpJ3ar50K1rHzNs7Uv6s3w_ATEtZDrua3U/
- right:20px; bottom:20px;

posisi gambar pada template adalah 20 pixel dari bawah dan kanan.
6. Terakhir, klik Save Template.
7. Lihat hasilnya.

Anda sedang membaca artikel tentang Membuat Back To Top dengan jQuery dan Anda boleh menyebarluaskan atau mengcopy artikel Membuat Back To Top dengan jQuery ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya. Terimakasih telah berkunjung.

Membuat Back To Top dengan jQuery

2 Responses to " Membuat Back To Top dengan jQuery "

…

…

…