Cara Membuat Animasi Scrollspy dengan Library Scrollspy-js

Efek ScrollSpy adalah teknik yang secara otomatis menyorot link navigasi saat pengguna menggulir ke bagian (section) tertentu dari halaman. Dengan scrollspyy-js, Anda dapat membuat navigasi interaktif tanpa harus menulis logika JavaScript yang rumit.

1. Cara Menggunakan (CDN)

Anda bisa menyertakan library langsung melalui jsDelivr atau unpkg:

Opsi 1: jsDelivr

<script src="<https://cdn.jsdelivr.net/npm/scrollspyy-js@latest/dist/scrollspy.js>"></script>

Opsi 2: unpkg

<script src="<https://unpkg.com/scrollspyy-js@latest/dist/scrollspy.js>"></script>

2. Inisialisasi ScrollSpy

Tambahkan script berikut setelah memuat file scrollspy.js:

<script>
  scrollSpy.init({});
</script>

Anda bisa menambahkan konfigurasi di dalam {} untuk mengubah tampilan & perilaku.

3. Contoh Dasar (Quick Start)

index.html :

<!DOCTYPE html>
<html>
<head>
  <title>ScrollSpy Example</title>
  <style>
    /* Navigasi tetap */
    nav {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    nav a {
      display: block;
      padding: 0.5rem 1rem;
      text-decoration: none;
      color: #333;
      margin-bottom: 0.5rem;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    /* Konten */
    section {
      min-height: 100vh;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" class="nav-link">Home</a>
    <a href="#about" class="nav-link">About</a>
    <a href="#services" class="nav-link">Services</a>
    <a href="#contact" class="nav-link">Contact</a>
  </nav>

  <section id="home" style="background: #e3f2fd;">
    <h1>Home Section</h1>
  </section>
  
  <section id="about" style="background: #f3e5f5;">
    <h1>About Section</h1>
  </section>
  
  <section id="services" style="background: #e8f5e9;">
    <h1>Services Section</h1>
  </section>
  
  <section id="contact" style="background: #fff3e0;">
    <h1>Contact Section</h1>
  </section>

  <!-- Library -->
  <script src="<https://cdn.jsdelivr.net/npm/scrollspyy-js@latest/dist/scrollspy.js>"></script>

<script src="script.js"></script>
</body>
</html>

scritpt.js atau tab javascript (jika pakai kode editor online)

  // Inisialisasi dasar
    scrollSpy.init({});

Catatan Penting:

Semua link navigasi harus pakai class .nav-link.
- Karena secara default, library mencari elemen dengan selector .nav-link.
- Jika link tidak diberi class ini, maka tidak akan dikenali sebagai bagian dari ScrollSpy.
- Contoh benar:
```
<a href="#about" class="nav-link">About</a>
```
href di navbar harus sama persis dengan id di section target.
- ScrollSpy bekerja dengan mencocokkan nilai href pada link dengan id pada section.
- Jika berbeda, link tidak akan aktif saat section tersebut discroll.
- Contoh benar:
```
<a href="#services" class="nav-link">Services</a>
<section id="services">...</section>
```
- Contoh salah (tidak akan aktif):
```
<a href="#services" class="nav-link">Services</a>
<section id="layanan">...</section>
```
Default target section adalah <section>. Kalau mau pakai tag lain, atur sectionSelector.

Secara bawaan, ScrollSpy hanya melacak elemen <section>.
Jadi, setiap id di navbar sebaiknya diarahkan ke tag <section>.
Jika ingin menggunakan elemen lain seperti <div>, perlu menyesuaikan pengaturan saat inisialisasi:
```
scrollSpy.init({
  sectionSelector: "div" // ganti target dari <section> ke <div>
});
```

4. Opsi Konfigurasi

Anda bisa menyesuaikan tampilan & perilaku dengan parameter berikut di scrollSpy.init():

Parameter	Tipe	Default	Deskripsi
`sectionSelector`	String	`"section"`	Selector untuk section yang dilacak. Wajib punya `id`.
`navSelector`	String	`".nav-link"`	Selector untuk link navigasi. `href` harus mengarah ke `id` section.
`padding`	Number	`5`	Padding (px) untuk link aktif.
`borderRadius`	String	`"5px"`	Radius border untuk link aktif.
`offset`	Number	`150`	Offset scroll (px) sebelum link dianggap aktif. Cocok untuk header fixed.
`activeClass`	String	`"active-scrollspy"`	Class CSS yang ditambahkan pada link aktif.
`bgColor`	String	`""`	Warna background link aktif.
`textColor`	String	`"#59110cff"`	Warna teks link aktif.
`fontWeight`	String	`"bolder"`	Ketebalan font link aktif.
`underline`	Boolean	`false`	Aktifkan underline untuk link aktif.
`underlineColor`	String	`"blue"`	Warna underline.
`underlineOffset`	String	`"2px"`	Jarak underline dari teks.

5. Contoh Lanjutan

Custom Navigation

scrollSpy.init({
  sectionSelector: ".content-section",
  navSelector: ".sidebar-nav a",
  padding: 10,
  borderRadius: "25px",
  offset: 100,
  bgColor: "#c4f622ff",
  textColor: "#ffffff",
  fontWeight: "600",
  underline: false
});

Minimal Configuration

scrollSpy.init({
  bgColor: "#007bff",
  textColor: "#fff"
});

Dengan Underline

scrollSpy.init({
  bgColor: "transparent",
  textColor: "#e91e63",
  fontWeight: "bold",
  underline: true,
  underlineColor: "#e91e63",
  underlineOffset: "4px"
});

Untuk Fixed Header (misalnya tinggi 80px)

scrollSpy.init({
  offset: 80,
  bgColor: "#28a745",
  textColor: "#fff",
  borderRadius: "0px"
});

Troubleshooting

Style tidak terapkan?
Library menggunakan !important untuk override, pastikan tidak ada konflik CSS lain.
Error di console?
Periksa apakah script dipanggil setelah elemen nav & section dimuat.
Navigasi tidak aktif?
Pastikan href di link sama dengan id pada section (contoh: href="#about" → <section id="about">).

Contoh Kode Lengkap

Full kode bisa cek disini

Cara Membuat Animasi Scrollspy dengan Library Scrollspy-js

1. Cara Menggunakan (CDN)

Opsi 1: jsDelivr

Opsi 2: unpkg

2. Inisialisasi ScrollSpy

3. Contoh Dasar (Quick Start)

Catatan Penting:

4. Opsi Konfigurasi

5. Contoh Lanjutan

Troubleshooting

Contoh Kode Lengkap

Artikel Terkait

Best Practices Pengembangan Proyek Python dengan .env dan Dotenv

Panduan Lengkap Menginstall SASS di Windows

Cara Membuat Efek Parallax dengan HTML dan CSS

Artikel Populer

Building RESTful APIs with GORM

Getting Started with Go and Fiber

Panduan Lengkap Menginstall SASS di Windows

Jelajahi Topik