Pada hakekatnya program di sajikan atau dibuat semenarik mungkin, untuk mempermudah dan membantu pekerjaan manusia menjadi lebih baik, pada tampilan atau sisi dari user interface sangat berpengaruh dalam membuat sebuah desain, desain ini akan sangat mahal bila dipoles dengan sentuhan yang sudah di risetkan dan direncanakan sebaik mungkin, nah pada pembahasan kita kali ini saya akan membahas tentang Bagaimana Cara Membuat Scrollspy Menggunakan Bootstrap 4
scrollspy atau membuat halaman website menjadi minim,kenapa minim karena pada pembahasannya hanya menggunakan 1 halaman saja, tidak memakan banyak halaman, menarik, untuk kita coba, oke langsung saja saya akan praktekan, teman-teman bisa salinkan scriptnya dibawah sini :
<body data-spy="scroll">
<nav class="navbar navbar-expand-lg navbar-light bg-danger fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#satu"> Pertama <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dua">Kedua</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tiga">Ketiga</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#empat">Keempat</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-12">
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<div class="satu">
<h1 id="satu">Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quam quis deserunt molestiae. Temporibus at architecto expedita inventore animi quo, amet iure molestias magnam, quia quisquam ullam non molestiae eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur accusamus odio, optio, commodi minima quibusdam accusantium magni a ex placeat eius laborum totam, quisquam illum alias quam numquam dicta. Iste.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nemo, architecto soluta possimus asperiores sed eius at dolorum illo, provident natus assumenda tempora nulla. Repudiandae cumque obcaecati, in magni quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed molestiae nobis atque aut ad, id, facilis hic culpa inventore maiores veritatis animi architecto eius deleniti esse beatae. Doloremque inventore, harum.</p>
</div>
<div class="dua">
<h1 id="dua">Lorem ipsum dolor sit amet Dua</h1>
<p>consectetur adipisicing elit. Assumenda eligendi, maiores odio officiis dignissimos similique quia. Ut architecto porro reiciendis doloremque, earum maxime quae soluta, natus cum dolore, dolores eius?Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nemo, architecto soluta possimus asperiores sed eius at dolorum illo, provident natus assumenda tempora nulla. Repudiandae cumque obcaecati, in magni quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed molestiae nobis atque aut ad, id, facilis hic culpa inventore maiores veritatis animi architecto eius deleniti esse beatae. Doloremque inventore, harum.</p>
</div>
<div class="tiga">
<h1 id="tiga">Lorem ipsum dolor sit ametTiga</h1>
<p>consectetur adipisicing elit. Iusto tempore eius, eligendi aperiam quasi voluptate, ipsum eveniet et, nam doloremque nulla odio dolorum deserunt ex, rem possimus mollitia fugit. Eligendi!Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nemo, architecto soluta possimus asperiores sed eius at dolorum illo, provident natus assumenda tempora nulla. Repudiandae cumque obcaecati, in magni quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed molestiae nobis atque aut ad, id, facilis hic culpa inventore maiores veritatis animi architecto eius deleniti esse beatae. Doloremque inventore, harum.</p>
</div>
<div class="empat">
<h1 id="empat">Lorem ipsum dolor sit amet Empat</h1>
<p>consectetur adipisicing elit. Quam, illum maiores est nostrum, alias sed quia numquam rem aliquid, recusandae et natus optio. Consectetur ducimus alias tempore, praesentium a explicabo.Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nemo, architecto soluta possimus asperiores sed eius at dolorum illo, provident natus assumenda tempora nulla. Repudiandae cumque obcaecati, in magni quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed molestiae nobis atque aut ad, id, facilis hic culpa inventore maiores veritatis animi architecto eius deleniti esse beatae. Doloremque inventore, harum.</p>
</div>
</div>
</div>
</div>
</div>
Jika sudah coba save dan jalankan, cukup mudah bukan, sekian tutorial tentang Cara Membuat Scrollspy Menggunakan Bootstrap 4, sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA