Bootstrap 4

Tutorial Bootstrap 4 #31 : Scrollspy Bootstrap 4

By Diki Alfarabi Hadi
6 September 2019
Bootstrap 4

Setelah mempelajari progress bar pada bootstrap 4, selanjutnya pada tutorial bootstrap bagian ke tiga puluh satu ini kita akan belajar tentang sebuah komponen bootstrap lagi, Yaitu Scrollspy.

Scrollspy Bootstrap 4

Scrollspy adalah sebuah komponen bootstrap yang mampu mengubah atau mengupdate menu navigasi atau list group yang aktif, sesuai dengan posisi konten yang terlihat pada layar browser.

Bingung ? tenang, pada Tutorial Bootstrap 4 #31 ini akan dibuatkan juga contoh lengkapnya sehingga teman-teman bisa lebih mudah memahami maksud dan kegunaan dari scrollspy ini sendiri.

Contoh Scrollspy Pada Navbar

Misalnya kita ingin membuat sebuah website yang hanya memiliki 1 halaman, dimana pada halaman tersebut sudah kita buatkan beberapa menu pada navbar, misal ada home, tentang, dan kontak.

Data home, tentang dan kontak tersebut juga kita buatkan pada 1 halaman yang sama (bukan di halaman yang berbeda-beda).

Jadi pada saat halaman tersebut di scroll ke bawah, menu yang aktif juga akan langsung otomatis di update tergantung data apa yang sedang terlihat pada browser (home, tentang atau kontak).

Baca juga tutorial bootstrap 4 sebelumnya tentang navbar bootstrap.

Untuk membuat contoh scrollspy sederhana, silahkan teman-teman perhatikan contoh berikut.

<!doctype html>

<html>

<head>

<title>Tutorial Scrollspy Dengan Bootstrap 4 - www.malasngoding.com</title>

</head>

<a class="navbar-brand" href="https://www.malasngoding.com/scrollspy-bootstrap-4">www.malasngoding.com - Tutorial Bootstrap 4 - Membuat Scrollspy</a>

</li>

<a class="nav-link" href="#tentang">Tentang</a>

</li>

<a class="nav-link" href="#kontak">Kontak</a>

</li>

</ul>

</nav>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat nostrum, doloribus soluta ipsum magnam omnis accusantium quam iste! Quasi eum quas iusto, molestias veniam a placeat, nemo quidem consequatur?

</p>

<hr>

<h2 id="tentang">Tentang</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum repellat placeat rerum, architecto praesentium beatae harum hic doloremque, incidunt ipsum magni suscipit maxime inventore, repellendus voluptates adipisci iusto necessitatibus tempora.

</p>

<hr>

<h2 id="kontak">Kontak</h2>

<p>

Kontak malasngoding.com :

<br/>

<b>malasngoding@gmail.com</b>

</p>

</div>

</body>

</html>

dan saat dijalankan, maka hasilnya akan seperti berikut.

scrollspy bootstrap 4

Perhatikan menu navbar, link yang aktif akan terupdate otomatis mengikuti konten apa yang sedang tampil pada layar browser.

Contoh Scr0llspy Pada List Group

Selain navbar, kita juga bisa menerapkan scrollspy pada list group.

Silahkan baca juga tutorial sebelumnya tentang cara membuat list group.

Silahkan perhatikan contoh scrollspy menggunakan list group berikut.

<!doctype html>

<html>

<head>

<title>Tutorial Scrollspy Dengan Bootstrap 4 - www.malasngoding.com</title>

</head>

<body >

<h3>Tutorial Membuat Scrollspy Dengan Bootstrap 4</h3>

<h4><a href="https://www.malasngoding.com/scrollspy-pada-bootstrap-4/">www.malasngoding.com</a></h4>

</center>

<br/>

<a class="list-group-item list-group-item-action" href="#tentang">Tentang</a>

<a class="list-group-item list-group-item-action" href="#kontak">Kontak</a>

</div>

<p>

</p>

<hr>

<h2 id="tentang">Tentang</h2>

<p>

</p>

<hr>

<h2 id="kontak">Kontak</h2>

<p>

Kontak malasngoding.com :

<br/>

<b>malasngoding@gmail.com</b>

</p>

</div>

</body>

</html>

Dan jika dijalankan hasilnya akan seperti berikut.

scrollspy menggunakan list group

Untuk source code jadinya bisa teman-teman lihat pada link berikut.

DEMO Scrollspy Dengan Navbar

DEMO Scrollspy Dengan List Group

Jika teman-teman ingin membaca dokumentasi dari bootstrap nya sendiri tentang scrollspy, teman-teman bisa baca di

https://getbootstrap.com/docs/4.3/components/scrollspy/

Oke, terima kasih sudah mengikuti Tutorial Bootstrap 4 #31 : Scrollspy Bootstrap 4, silahkan teman-teman bereksperimen lebih jauh. supaya lebih familiar dengan class-class bootstrap yang sudah dijelaskan di www.malasngoding.com. 😉

Incoming search terms:

b-scrollspy
contoh scrollspy
smooth scroll bootstrap 4
Tutorial Bootstrap 4 #31 :

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.