Cara Implementasi Metode Scrollspy Pada Materialize

Halo selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan tips – tips seputar dunia website. Pada kesempatan kali ini kita sudah sampai pada pembahasan Scrollspy pada framework css materialize. Dimana kita akan belajar tentang Cara Implementasi Metode Scrollspy Pada Materialize, metode yang akan kita buat ini adalah untuk membuat sebuah navigasi scroll vertical dimana ketika di klik menu maka akan scroll otomatis di area halamannya. Metode ini juga dapat kita pakai pada project website teman – teman yang saat ini kalian buat. Baik langsung saja kita implementasikan Metode Scrollspy, teman – teman siapkan file materialize nya dan text editornya.

Lalu buka pada file index.html pada text editornya kemudian ketikkan script html nya di bawah ini, dan ikut terus pada artikel Cara Implementasi Metode Scrollspy Pada Materialize ini

  <div class="row">
    <div class="col s12 m9 l10">
      <div id="Home" class="section scrollspy">
        <p>Content </p>
      </div>

      <div id="Gallery" class="section scrollspy">
        <p>Content </p>
      </div>

      <div id="About" class="section scrollspy">
        <p>Content </p>
      </div>
    </div>
    <div class="col hide-on-small-only m3 l2">
      <ul class="section table-of-contents">
        <li><a href="#Home">Home</a></li>
        <li><a href="#Gallery">Gallery</a></li>
        <li><a href="#About">About</a></li>
      </ul>
    </div>
  </div>

Kemudian teman – teman isikan content atau isi dari masing – masing section nya, nah pada contoh kali ini saya mmberikan script dumy dan memasukkan beberapa image agar content sampai melewati tinggi monitor supaya terlihat Scrollspy ini berfungsi

Jika sudah langkah selanjutnya kita tambahkan script jQuery nya untuk menjalankan Scrollspy nya

 <script type="text/javascript">
 $(document).ready(function(){
 $('.scrollspy').scrollSpy();
 });
 </script>

Letakan script jQuery nya tepat di bawah link materialize.min.js nya

Jika sudah save dan jalankan pada browser, maka akan menghasilkan output seperti gambar di bawah ini

Kemudian klik pada setiap nav menu nya, maka dengan otomatis akan di arahkan pada halaman berisi content sesuai nama menu nya. Demikianlah Cara Implementasi Metode Scrollspy Pada Materialize semoga bermanfaat dan bisa menjadi refrensi untuk teman – teman dalam pembuatan halaman website yang user friendly. Sekian dari saya, kurang lebihnya mohon maaf dan jika ada yang mau di tanyakan silahkan post komentar di kolom bawah ini. Terimakasih dan sampai jumpa.

Cara Implementasi Metode Scrollspy Pada Materialize

Kategori