Bagaimana menggunakan JavaScript metode scrollBy dan setTimeout untuk membuat halaman website (atau blog) menggulung ke bawah (scroll down) secara otomatis?
Membuat fungsi PageScroll di halaman website
Contoh berikut memperlihatkan bagaimana fungsi ini 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">
Fungsi Stop Scrolling di halaman website
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);
}
clearTimeout(scrolldelay);
}
Fungsi Scroll Directly to a Particular Point - website files
Gunakan metode penggunaan fungsi scroll () untuk melompat ke titik tertentu di 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
source : How to Scroll a Page With JavaScript
Contoh lain :
script type='text/javascript'>
window.onload = setTimeout("window.scrollBy(0,73);",3000);
</script>
window.onload = setTimeout("window.scrollBy(0,73);",3000);
</script>
Jika ingin ubah seberapa jauh layar bergulir ke bawah, ganti saja nilai 73 dengan nilai diinginkan. Jika ingin mengganti berapa lama waktu untuk bergulir (kecepatan penggulungan/scrolling speed) - timeout 3000 artinya lama waktu 3 detik layar menggulung ke bawah - maka ubah saja nilai timeout 3000 dengan nilai millisecond lain (1000 = 1 second).
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
