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.

go to top
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 Delete

Fungsinya buat apa nich mas???

ardi33.web.id write.. 05 Juli, 2009 Delete

ya buat kembali ke atas.....kand udah ada judulnya...

Mbah Goblog write.. 20 Desember, 2009 Delete

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 Delete

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 Delete

o iya mas oblo watcher juga ya deviant akun ane. disini : http://dkhe.deviantart.com. makasih mas.

Mbah Goblog write.. 20 Desember, 2009 Delete

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 Delete

kalo bikin dihalaman html biasa gimana caranya mas?? mohon pencerahannya

Ghustie Samosir write.. 10 Juli, 2010 Delete

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

Tayusani Yuza Dyk write.. 01 November, 2010 Delete

wah kok ga ada efek nya ya...
malah efek na tetep loncat kk > <

Hourai Tatsugi write.. 24 Agustus, 2011 Delete

kk gk berfungsi neehh.. gimana dong??

Denny write.. 06 September, 2011 Delete

@Hourai tatsugi .: mungkin ada code yang salah bro.. tq

Posting Komentar

Spam is not Good for your Body :)

 
© 2010 Blogger Tutorial | Powered by Blogger | Valid X/HTML (Home Page)
Framework: Choen Design: Denny
Back To Top