Minggu, 06 Februari 2011

Cara Membuat Back to Top Dengan jQuery

Dalam postingan ini, saya akan membahas tentang bagaimana cara membuat back to top. Back to top ini berfungsi untuk mengembalikan ke halaman atas.
Langsung saja :
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/AVvXsEiCoPeRBUaMLbQiUFAK-EGqfypz-nALI4unDAxhicXgukv7F79whyphenhyphenpRjvLrmM5V_b8J2NVfJGgMnh70rHYJZI5yuMQZ-8-NkTfBNN5r5ZywXUeu-VduQq9shdbWfdeiivpkPci_V28NCWY/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
Keterangan :
Silahkan url yang saya beri warna pink dengan url gambar anda.

Good Luck....
Semoga Berhasil...

Terkait

Description: Cara Membuat Back to Top Dengan jQuery Rating: 4.5 Reviewer: Unknown ItemReviewed: Cara Membuat Back to Top Dengan jQuery
Al
Mbah Qopet Updated at: Minggu, Februari 06, 2011

0 komentar:

Posting Komentar