jQuery .scrollTop() dan .scrollLeft()

.scrollTop() digunakan untuk mengambil data mengenai seberapa jauh Anda telah menggulung layar ke bawah..scrollLeft() digunakan untuk mengambil data mengenai seberapa jauh Anda telah menggulung layar ke kanan. Selain mengambil data, fungsi tersebut juga dapat digunakan 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 digunakan untuk menjalankan perintah apabila sebuah halaman telah discroll sampai pada titik tertentu. Seperti halnya navigasi back to top (baca di sini), saat Anda telah menggulung layar sampai pada titik tertentu, maka navigasi back to top akan ditampilkan dengan efek .fadeIn():

Navigasi Back to Top

Di sini Saya akan memberikan contoh bagaimana sebuah perintah dijalankan apabila sebuah area telah discroll sampai 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 bar vertikal #area telah lebih besar dari 200...
        if($(this).scrollTop() > 200) {
            // tampilkan elemen <h2 id='indc'>Hai! Nama Saya Taufik Nurrohman.</h2>
            // dengan efek .slideDown()
            $('h2#indc').slideDown();
        // Dan jika posisi scroll bar 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 adalah selain kondisi diatas,
            // hilangkan elemen <h2 id='indc'>Hai! Nama Saya Taufik Nurrohman.</h2>
            // dengan efek .slideUp()
            $('h2#indc').slideUp();
        }
    });
});

Lihat Demo

Menerapkan Nilai Secara Langsung

Fungsi .scrollTop() dan .scrollLeft() juga bisa diterapkan untuk memposisikan area pada jarak scroll tertentu. Kode di bawah ini akan menggulung #area pada jarak gulungan vertikal sebesar 300 pada saat halaman diakses:

$(function() {
    $('#area').scrollTop(300);
});

Lihat Demo