Cara Scroll ke Atas Halaman di JavaScript

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).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *