Membuat Efek scrollTop Window Dengan jQuery

Efek scollTop merupakan efek yang sederhana namun unik yang bisa anda buat dengan jQuery. Efek ini akan membuat halaman paling bawah menggulung secara animasi ke halaman paling atas. Cocok digunakan jika anda punya halaman dengan artikel yang sangat panjang. Untuk demonya bisa anda lihat disini.

Ok, langsung saja ke tutorial.

• Pertama, pastikan library jQuery telah ada atau terinstall di blog anda. jika belum, klik disini.
• Sebelum menulis, masuk ke Edit HTML dan masukkan kode dibawah ini:


<script type="text/javascript">
$(document).ready(function(){
//kode perintah untuk menggulung halaman ke bawah
$('a.scrollToBottom').click(function(){
 $('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;
}); 
      
//kode perintah untuk menggulung halaman ke atas
$('a.scrollToTop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})
</script>

• Nilai slow bisa anda rubah sesuai keinginan anda.
• Nah, terakhir buat link atau tombol dengan class=atas. dimana jika link atau tombol ini diklik halaman akan menggulung. Tempatkan paling bawah.
• Terakhir, link untuk membuat halaman menggulung keatas/ kebawah dengan format: <div id="scrollBottom"><a href="#" class="scrollToTop">gulung halaman keatas</a></div>

Semoga infonya bermanfaat dan silahkan tinggalkan komentar anda jika ada pertanyaan.