Kukuh Cakra Darma

Back To Top With jQuery

Nah, kali ini saya akan membahas cara untuk memasang "Back To Top With jQuery" yang mana back to top kali ini menggunakan seperti efek scroll dengan perlahan. Oke langsung saja ya

1. Login ke blog anda --> Rancangan --> Edit HTML
2. Masukkan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<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>
*NOTE : jika di template anda sudah terdapat script jQuery 1.3.2 (yang saya tandai bewarna hijau bercetak tebal), maka anda tidak perlu lagi menambahkan kode ini.

3. Nah, kemudian mari kita mencari <body> dan ganti menjadi <body id='top'>.
4. Cari </body> dan letakkan kode berikut dibawah kode yang telah anda cari </body>


<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='http://2.bp.blogspot.com/_fqjCZ2SxflI/TBliTFM2GOI/AAAAAAAAAKI/xgAIzEcW4MM/S768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
*NOTE : Anda bisa mengganti alamat yang bewarna ungu dengan gambar anda sendiri.
Sehingga menjadi seperti berikut

Ok? bisa dipahami? Sekian terima kasih :)



Artikel Terkait:

0 Comments:

Post a Comment | Classic Comment's Form