Cara Membuat Back to Top Dengan jQuery

Friday, 6 August 2010

Hy semuanya... Apa sampeyan sudah membuat tombol back on top ?nya? Jika sudah atau pun belum, 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:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/> 
<script type=’text/javascript’>
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^’//,'') == this.pathname.replace(/^’//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>

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/AVvXsEiZ79n1c6_2elw8JUog1SfpZcdsXD87NtHrfG2U1gcwYjt222Q9OvEmqN6uW6zJrmZyBb9Yu9FeS70vnh6ZkwzMKRc7GcEJEnqGF7URqfL7vDsNb57RO-d93y_bLviIxGgmuRf0prPZZ8E/s400/arrow1-blue-32.png’ style=’right:20px;bottom:20px;position:fixed’/>
</a>
</div>

Keterangan:

- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ79n1c6_2elw8JUog1SfpZcdsXD87NtHrfG2U1gcwYjt222Q9OvEmqN6uW6zJrmZyBb9Yu9FeS70vnh6ZkwzMKRc7GcEJEnqGF7URqfL7vDsNb57RO-d93y_bLviIxGgmuRf0prPZZ8E/s400/arrow1-blue-32.png > url gambar
- right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.

info: untuk gambar / tombolnya bisa anda download disini.

6. Terakhir, klik Save Template.

thanks 2 : Zakky

Cara Membuat Back to Top Dengan jQuery 9 out of 10 based on 10 ratings. 9 user reviews.

Tutorial Blog

JQuery BlOg

cElOTEh sObAT BLOGGER :

Ada 0 komentar ke “Cara Membuat Back to Top Dengan jQuery”

:cendolbig :batabig :najis :marah :repost :2thumbup :matabelo :request :babyboy1 :sorry :travel :kimpoi :ultah :rate5 :bola :kbgt :iloveindonesia :nosara :berduka :hoax :dp :cekpm :thumbup :kr :nohope :ngacir :salahkamar :cool :mewek :babyboy :babygirl :95