Tombol “Kembali ke atas” umum pada halaman panjang untuk memudahkan navigasi. Artikel ini membahas cara scroll ke atas halaman di JavaScript.
window.scrollTo()
<script>
window.scrollTo({
top: 0,
behavior: "smooth"
});
</script>
Opsi behavior: "smooth" membuat guliran halus, bukan melompat langsung.
Contoh Kasus: Tombol yang Muncul Saat Scroll ke Bawah
<script>
const tombol = document.getElementById("keatas");
window.addEventListener("scroll", function() {
tombol.style.display = (window.scrollY > 300) ? "block" : "none";
});
tombol.addEventListener("click", function() {
window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>
window.scrollY memberi posisi guliran saat ini, sehingga tombol hanya muncul setelah menggulir cukup jauh.
Kesimpulan
Gunakan window.scrollTo({top:0, behavior:"smooth"}) untuk scroll ke atas dengan animasi halus. Padukan dengan event scroll dan window.scrollY untuk memunculkan tombol hanya saat dibutuhkan.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

