Back To Top Dengan jQuery

Back To Top Dengan jQuery. Mungkin ada yang bingung dengan judul diatas, untuk lebih jelasnya lihat pada sudut kanan. Disana terdapat tanda panah keatas, digunakan untuk menuju top page. Kenapa ada fasilitas seperti itu? Back to top digunakan bila terdapat artikel postingan yang panjang, sehingga pembaca enggan melihat keatas lagi karena harus menggunakan scroll. Untuk itulah di buat scroll otomatis sehingga mempermudah pembaca menggapai top page tanpa harus susah payah memutar scroll pada mouse.

Sebetulnya sudah banyak blogger yang membahas masalah ini, namun kebanyakan masih menggunakan '#' sebagai tujuan untuk menggapai top page sehingga terkesan meloncat. Singgah di halaman Deconstruction Code saya menjumpai sedikit perbedaan tentang mencapai top page atau bagian page yang di inginkan secara halus. Code yang di gunakan menggunakan CSS biasa dibantu dengan jQuery. Langsung saja ke codenya untuk yang sudah penasaran mengaplikasikannya.

1. Silakan login ke account blogger anda.
2. Menuju ke edit HTML dan masukkan script di bawah ini diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
3. Masukan javascript ini dibawah script jQuery tadi
<script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#]').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. Masukan script dibawah ini diatas </body>
<a href='#top' style='display:scroll; position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='http://i42.tinypic.com/2gselok.png'/></a>
Image dan lokasi gambar bisa anda atur sesukanya.
5. Cari <body> dan gantilah menjadi <body id='top'>
6. Save template.

Thanks to klik here

11 Comments for Back To Top Dengan jQuery:

Kuliah Gratis write.. 29 Juni, 2009: Fungsinya buat apa nich mas???
ardi33.web.id write.. 05 Juli, 2009: ya buat kembali ke atas.....kand udah ada judulnya...
Mbah Goblog write.. 20 Desember, 2009: kalo bikin yang kayak punyamu g mana sob?? coz aku dah nyoba yang di davidwalsh.name itu tetep aja gak bisa. share donk sob.makasih.
Mbah Goblog write.. 20 Desember, 2009: Wehehehe.berhasil. terimakasih udah di bantu. link blog ini udah tak masukin di blog ane. insya allah nanti tak bikin in bannernya masing2 blog dari teman2 bloggers. sekali lagi makasih mas denny.GBU
Mbah Goblog write.. 20 Desember, 2009: o iya mas oblo watcher juga ya deviant akun ane. disini : http://dkhe.deviantart.com. makasih mas.
Mbah Goblog write.. 20 Desember, 2009: mas saya udah pasang banner oblo.web.id di blog saya. maaf kalo baru minta ijin. Tapi kalo ga setuju dengan banner yang saya pasang, saya akan menghapusnya.makasih
Anonim write.. 27 Februari, 2010: kalo bikin dihalaman html biasa gimana caranya mas?? mohon pencerahannya
Ghustie Samosir write.. 10 Juli, 2010: wah mantap sob, bagus juga yach, mudah2an gak memberatkan loading blog :)

makasih infonya sob :)

Regards,

Ghustie Samosir
www.hanyainfo.blogspot.com

Khusus Dewasa Klik Disini dan Disini
B aja write.. 01 November, 2010: wah kok ga ada efek nya ya...
malah efek na tetep loncat kk > <
Fortrenz Mc Marxent write.. 24 Agustus, 2011: kk gk berfungsi neehh.. gimana dong??
Denny write.. 06 September, 2011: @Hourai tatsugi .: mungkin ada code yang salah bro.. tq

Posting Komentar

Spam is not Good for your Body :)

Back To Top Dengan jQuery | OBLO™