Back to Top dengan jQuery

Posted by adOeL - -

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-vq5vg-4dlkwapNdX0T0byyPoBDbP4QELr7THZP6qMgHl_unKUs0DzwP0PH0HfruU0CHmRJ0ZHctVNKKo3j5oZXAgLTJRSaCmm-SflhFeyTVVM5lDJ-OfxUTLKm5BY8ZC5QkPRZwcBdc/s400/gototop-button.jpg
Sekarang anda harus baca tips ini dengan baik karena cara membuat back to top kali ini menggunakan jQuery. Di trik lama, gerak back to top yang dihasilkan sangat cepat dan langsung menuju ke atas. Lain halnya dengan jika kita memberi sedikit sentuhan scipt jQuery. Gerak yang dihasilkan akan lebih perlahan dan lembut.

Berikut Cara Membuat Smoothscroll Go to Top
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 : <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/AVvXsEhrCh16VFEJwooKQDt3xhjGlzoz7SqvBlTTk5cu7IjMxDoLM_nnExphbMdiLvuIjJH2PnpdR53dy-G0wS_04GrRzc829P4UnMvD-rVvGNSFN-eTrEwbCVIkTsRjjrpsglvy9ZvPLcIDtgp8/s1600/Go-To-Top.png' style='right:2px;top:2px;position:fixed'/>
</a>
</div>

6. Simpan dech....
7. Coba lihat hasilnya...

Keterangan:
- Warna Biru > url gambar
- right:2px;top:2px; > posisi gambar pada template adalah 2 pixel dari atas dan kanan.
info: untuk gambar / tombolnya bisa anda download disini.

Jangan Lp Untuk Lihat Contoh Back to Top Lainnya :
1. Back To Top Atas/Bawah Transparent



Lihat juga artikel lainnya :)

Utta Melanikz

Post Author : Utta 'The Shelter'

Gue hanyalah seorang blogger pemula yang ingin belajar dan berbagi, Semua artikel bersumber dari pengalaman yang saya dapatkan dari dunia internet.Jika anda senang dengan Artikel ini, silahkan berlangganan gratis Via Email atau Feed Rss

Bagaimana Pendapat Anda??

Segera Laporkan apabila sobat menemukan Broken link (link rusak) atau ingin request dan bertanya, dengan meninggalkan pesan di bawah ini,dan Blog ini sudah DoFollow, namun tetap jaga kesopanan dengan tidak melakukan komentar spam yach.