Posting kali ini tentang bagaimana menggunakan JavaScript metode scrollBy dan setTimeout untuk membuat halaman web (web page) menggulung ke bawah (scroll down) secara otomatis. ganti saja nilai timeout untuk mengubah-ubah kecepatan penggulungan (scrolling speed) dalam ukuran waktu millisecond.
Contoh berikut memperlihatkan bagaimana fungsi tersebut bekerja (kita sebut saja fungsi pageScroll) :
function pageScroll() { window.scrollBy(0,50); // horizontal and vertical scroll increments scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds }
Untuk menjadikan bergulir secara otomatis ketika memuat halaman web (page loads), tambahkan code berikut ini pada tag body. :
<body onLoad="pageScroll()">
Untuk memulai pengguliran (penggulungan) webpage ketika diminta oleh pengguna, panggil saja fungsi tersebut dari suatu text link atau tombol. Aplikasinya seperti di bawah ini :
Text Link
<a href="javascript:pageScroll()">Scroll Page</a>
Catatan: Jika Anda mengklik link Scroll Page diatas, maka halaman web akan selalu bergulir ke halaman paling bawah. Anda harus klik link di bagian bawah halaman untuk membatalkan bergulir (yang terus- menerus terjadi).
Button
<input type="button" onClick="pageScroll()" value="Scroll Page">
Stop Scrolling
Fungsi pageScroll () diatas menyebabkan halaman webpage akan terus-menerus bergulir selamanya. Untuk menghentikannya diperlukan fungsi berikut stopScroll () agar berhenti bergulir, dan bisa dipanggil dengan cara yang sama :
function stopScroll() {
clearTimeout(scrolldelay);
}
<a href="javascript:stopScroll()">Stop Scrolling</a>
Scroll Directly to a Particular Point
Gunakan cara atau metode penggunaan fungsi scroll () untuk melompat ke titik tertentu pada halaman webpage. Posisi target ditentukan dalam pixel dari pojok kiri atas halaman, horizontal dan vertikal.
function jumpScroll() { window.scroll(0,150); // horizontal and vertical scroll targets } <a href="javascript:jumpScroll()">Lompat ke tempat lain pada on-the-page</a>
Lompat ke tempat lain pada on-the-page
window.onload = setTimeout("window.scrollBy(0,73);",3000);
</script>
0 comments:
Post a Comment