jQuery .scrollTop() dan .scrollLeft()
Tabel Konten
.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()
:
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();
}
});
});
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);
});
3 Komentar
Admin
jika anda adalah guru , datang dan ajari saya dirumah :D
Taufik Nurrohman
@eko tri: ghahaha...
Unknown
makasih gan ijin copy sctipnya buat toko online saya ya jam tangan murah