Membuat Smooth Scroll To Section ID

Entahlah apakah judul ini tepat untuk penamaannya yang pasti saya tidak terlalu tahu tentang namanya yang penting kerja =D. Cek link berikut.

Demo

Sebelumnya, ID yang saya maksudnya itu contohnya seperti #header-wrapper (yang bertanda pagar).
Cara ini biasanya digunakan pada halaman F.A.Q, pengunjung akan diberikan link pertanyaan dan jika link di klik otomatis pengunjung akan scrolling ke jawaban.
Smooth Scroll ini fungsinya hampir sama seperti scroll to top, hanya bedanya jika scroll to top mengarahkan kita ke atas blog sedangkan Smooth Scroll To ID yang saya maksud ini mengarahkan kita ke ID tertentu (silahkan lihat pada Demo). Misalnya kita ingin membuat sebuah link yang akan membawa pengunjung ke bagian post dengan cara scrolling, kita bisa gunakan <a href='#post-wrapper' class='page-scroll'>Bawa Diriku</a>. Kuncinya hanyalah pada class page-scroll, karena kita akan menambahkan fungsi pada class tersebut menggunakan jQuery.

Lagi dan lagi jQuery :D, saya beralasan menggunakan jQuery lebih mudah dalam membacanya daripada menggunakan Javascript Dasar. Jadi pastikan kawan sudah memasang Library Jquery.

Mari kita mulai.
Karena saya menggunakan effect easing, jadi pasang dulu library easingnya diatas </body>

<script src='https://rawgit.com/brayenid/borneoscript3/master/jquery.easing.1.3.js'/>

Lalu tempelken jQuery berikut ini diatas </body>

<script>
$('.page-scroll').on('click',function(e){

  var href = $(this).attr('href');
  
  var bungkusanhref = $(href);

  $('html, body').animate({
    scrollTop: bungkusanhref.offset().top - 50}, 2000, 'easeOutExpo');
e.preventDefault()
});
</script>

Contoh penggunaan :

<a href='#main' class='page-scroll'>Scroll To Main</a>

Seperti yang saya katakan diatas, kita akan memberikan fungsi pada .page-scroll sehingga link yang kita beri class page-scroll dapat menjalankan perintah kita untuk scrolling.
Jika biasanya kita meng-klik elemen yang ber-atribut href maka halaman akan reload dan misalnya kita membuat membuat href='#main' otomatis URL yang kita buka akan menambahkan di belakangnya menjadi babla.com#main. Namun pada kasus ini hal itu tidak akan terjadi, karena kita telah menambahkan e.preventDefault(), perintah ini berfungsi untuk mencegah halaman melakukan reload, jadi jika kita mengklik link yang memiliki class page-scroll maka link tersebut tidak akan melakukan reload.

Saya harap artikel ini dapat dimengert. Sekian dari saya, terima kasih.

Artikel Terkait