Cara Scroll ke Elemen Tertentu di JavaScript

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

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 *