Membuat Back to Top dengan jQuery

Written by RA_Syihan on Saturday, November 20, 2010 | Category: , , ,

i
255 Votes


Wah, aku kembali lagi nih. kali ini aku kembali dengan blog tutorial yang sudah lama tidak aku tampilkan.

Membuat back to top dengan jquery adalah tema kita hari ini. Walaupun tutorial ini agak "kawak", tapi yang saya share di bawah ini, lebih lengkap dan simple. Back to top kali ini kelihatan lebih halus, karena tidak langsung ke atas, tapi perlahan. dan pastinya, dengan bantuan jquery. mari kita simak pelajaran membuat back to top dengan jquery.




1. Silahkan login ke blogger
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery ini, di atas kode </head>
<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>


5. Kemudian Ganti kode <body> dengan kode <body id='top'>

6. letakan kode di bawah ini, di atas kode </body>
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLNl-ZggJE5CMyNmW6Z_4e4ZXzhYboTRFBkkBILUDoOMAts6qRxpHqZoIdjMHgPP1_lLLB-EOy1CpVoMDgcJbTrK0R48v1WEXRouOmpvT3wTcnvV0RKxRp1AgPuQXbuMrHAN73e-QZmq0/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>

7. Selesai, dan silahkan menikmati back to top jquery

Share Artikel ini ke teman-temanmu

Lihat Artikel Lainnya disini