Senin, 20 Desember 2010

Scroll to Top and Bottom with jQuery

Lagi-lagi artikel lawas nih sob #-o Kehabisan ide dalam memosting mengenai tutorial blogspot. Sobat mungkin sudah tidak asing lagi dengan feature Back to Top! Ada yg menggunakan murni dengan kode HTML, dan ada juga yg menggunakan DHTML... Sekian banyak mungkin keluaran versi dynamic drive Dynamic Drive DHTML scripts gaya punya :-bd Beben si bloglang anu ganteng kalem tea mah seperti biasa akan berbagi scroll to top dan scroll to bottom jadi satu terintegrasi dengan jQuery Plugins ;) Syarat utamanya didalam template sobat harus sudah ada script<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>Masukan script jQuery plugins berikut, mau dibawah script jQuery inti diatas, atau diatas tag </body>

jQuery Plugins

<script type="text/javascript">
//<![CDATA[
$(function () {
$('#scrlBotm').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
},
1500);
return false;
});
$('#scrlTop').click(function () {
$('html, body').animate({
scrollTop: '0px'
},
1500);
return false;
});
});
//]]>
</script>
Cari kode ]]></b:skin> dan masukan kode CSS berikut diatasnya...
#scrlBotm {
float: right;
font-size: 13px;
position: fixed;
top: 0;
right: 0;
color: red;
}
#scrlTop {
float: right;
font-size: 13px;
position: fixed;
right: 0;
bottom: 0;
color: red;
}
Setelah itu temukan kembali kode <body> masukin kode HTML-nya<a href="#" id="scrlBotm">Scroll to Bottom</a>
<a href="#" id="scrlTop">Scroll to Top</a>

Save

Untuk tulisan Scroll to top dan Scroll to bottom bisa diganti dengan gambar kesukaan ;) Semoga artikel lawas ini bisa membuat blog sobat lebih gaya punya b-) \m/

Tidak ada komentar:

Posting Komentar