Cara Implementasi Metode Scrollspy Pada Materialize

Halo selamat datang kembali di laman tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya di pembahasan tips – tips seputar dunia laman. Di kesempatan kali ini kita telah hingga di pembahasan Scrollspy di framework css materialize. Dimana kita akan belajar mengenai Cara Implementasi Metode Scrollspy Pada Materialize, sistem yang akan kita bikin ini yaitu bagi merancang sebuah navigasi scroll vertical dimana ketika di klik fitur karenanya akan scroll otomatis di area halamannya. Cara ini pun dapat kita gunakan di project laman teman – teman yang ketika ini kalian bikin. Bagus seketika saja kita implementasikan Cara Scrollspy, teman – teman siapkan file materialize nya dan text editornya.

Lalu buka di file index.html di text editornya kemudian ketikkan script html nya di bawah ini, dan ikut terus di 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 di contoh kali ini saya mmberikan script dumy dan memasukkan beberapa image agar content hingga melewati tinggi monitor supaya terlihat Scrollspy ini berfungsi

Apabila telah langkah berikutnya kita tambahkan script jQuery nya bagi 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

.

Apabila telah save dan jalankan di browser, karenanya akan menghasilkan output seperti gambar di bawah ini

Kemudian klik di setiap nav fitur nya, karenanya dengan otomatis akan di arahkan di halaman berisi content sesuai nama fitur nya. Demikianlah Cara Implementasi Metode Scrollspy Pada Materialize semoga bermanfaat dan dapat menjadi refrensi bagi teman – teman pada penyusunan halaman laman yang user friendly. Sekianlah dari saya, kurang lebihnya mohon maaf dan jikalau ada yang mau di tanyakan silahkan post komentar di kolom bawah ini. Terimakasih dan hingga jumpa.

Sumber https://kursuswebsite.org