.scrollTop() dipakai untuk mengambil data mengenai seberapa jauh Anda telah menggulung layar ke bawah..scrollLeft() dipakai untuk mengambil data mengenai seberapa jauh Anda telah menggulung layar ke kanan. Selain mengambil data, fungsi tersebut juga sanggup dipakai untuk memposisikan halaman pada jarak gulungan tertentu.
Dasar Penggunaan
Kode di bawah ini akan mengambil data mengenai seberapa jauh elemen <div> telah tergeser ke atas oleh scroll bar dan menyimpannya ke dalam variabel scrTop:
var scrTop = $('div').scrollTop();Kode di bawah ini akan mengambil data mengenai seberapa jauh elemen <div> telah tergeser ke samping oleh scroll bar dan menyimpannya ke dalam variabel scrLeft:
var scrLeft = $('div').scrollLeft();Pada umumnya, metode ini dipakai untuk menjalankan perintah apabila sebuah halaman telah discroll hingga pada titik tertentu. Seperti halnya navigasi back to top (baca di sini), ketika Anda telah menggulung layar hingga pada titik tertentu, maka navigasi back to top akan ditampilkan dengan dampak .fadeIn():
Di sini Saya akan menawarkan pola bagaimana sebuah perintah dijalankan apabila sebuah area telah discroll hingga pada titik tertentu:
HTML
<h2 id='indc' style='display:none;'>Hai! Nama Saya Taufik Nurrohman.</h2> <div id='area'> <div style='width:1000px;height:1000px;'></div> </div>CSS
#area { background-color:black; width:300px; height:400px; overflow:auto; }jQuery
$(function() { $('#area').scroll(function() { // Jika posisi scroll kafe vertikal #area telah lebih besar dari 200... if($(this).scrollTop() > 200) { // tampilkan elemen <h2 id='indc'>Hai! Nama Saya Taufik Nurrohman.</h2> // dengan dampak .slideDown() $('h2#indc').slideDown(); // Dan kalau posisi scroll kafe horizontal #area sama dengan 200... } else if($(this).scrollLeft() == 200) { // Tampilkan peringatan "Hai! Nama Saya Taufik Nurrohman!" alert("Hai! Nama Saya Taufik Nurrohman."); } else { // Jika yang terjadi ialah selain kondisi diatas, // hilangkan elemen <h2 id='indc'>Hai! Nama Saya Taufik Nurrohman.</h2> // dengan dampak .slideUp() $('h2#indc').slideUp(); } }); });Menerapkan Nilai Secara Langsung
Fungsi .scrollTop() dan .scrollLeft() juga sanggup diterapkan untuk memposisikan area pada jarak scroll tertentu. Kode di bawah ini akan menggulung #area pada jarak gulungan vertikal sebesar 300 pada ketika halaman diakses:
$(function() { $('#area').scrollTop(300); });