Mengarahkan pengguna ke bagian tertentu halaman berguna untuk navigasi satu halaman (one-page), tautan “lompat ke”, atau menuju hasil pencarian. Artikel ini membahas cara scroll ke elemen tertentu di JavaScript.
Metode scrollIntoView()
<script>
const target = document.getElementById("bagian3");
target.scrollIntoView({ behavior: "smooth" });
</script>
Metode ini otomatis menggulirkan halaman hingga elemen terlihat, dengan animasi halus bila diberi opsi smooth.
Contoh Kasus: Navigasi Menu One-Page
<script>
document.querySelectorAll("nav a").forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
const id = this.getAttribute("href"); // "#kontak"
document.querySelector(id).scrollIntoView({ behavior: "smooth" });
});
});
</script>
Mengatur Posisi Akhir
<script>
target.scrollIntoView({ behavior: "smooth", block: "start" });
// block: "center" agar elemen di tengah layar
</script>
Kesimpulan
Gunakan scrollIntoView({behavior:"smooth"}) untuk menggulir ke elemen tertentu dengan mulus, ideal untuk navigasi one-page. Opsi block mengatur posisi akhir elemen di layar.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

