You must enable Javascript in your browser to run or open this site.

Back to Top Jquery

Sebelumnya saya pernah memposting artikel tentang Back to Top saja, namun kali ini sedikit berbeda dengan editan dari script jquery. Perbedaan dengan script ini adalah lebih halus, maksudnya pergerakan dari bawah ke atas (Top) menggunakan tahap tahap perlahan tapi pasti haha. Fungsi Script ini sama seperti Tools Firefox Pergeseran scroll dengan mulus.

View The Demos : Demos Back To Top JQuery
Nah sudah bisa bukan hasilnya? Ayo kita simak perjalanan script ini di blog sobat.

• Buka blogger.com dengan password dan id

• Buka rancangan atau design → Edit Html → Centrang Expand Widget

• Cari kode </head> dan letakan kode berikut diatasnya kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<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>
• Cari kode <body> dan ubah kode tersebut menjadi <body id='top'>

• Letakan kode berikut diatasnya kode </body> yang biasanya terletak di paling bawah template
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='http://i1042.photobucket.com/albums/b429/Farix_2010/FarixTop.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
Ubah kode hijau sebagai url gambar sesuai kebutuhan.

• Save template dan sudah selesai tutorial kali ini.
Terima kasih ya sobat semua.

6 comments

  1. nice tutrial kawan . ,

    kebetulan saya juga sudah pakai . , tapi link-nya saya taruh di text anchor bawah . ,

    BalasHapus
  2. kog nggak kerasa jquery nya..pas tak coba langsung naik jadi halaman atas..nggak kerasa smooth..

    BalasHapus
  3. Lihat deh demonya, saya coba bisa kok :) mungkin ada kode yang lupa atau apa yang ketinggalan sob, cek lagi deh

    BalasHapus
  4. Kunjungan silaturahmi kembali di sini saudaraku

    BalasHapus