Cara Membuat Efek Smooth Scroll Untuk Jump Link Di Blog

Harusnya kamu sudah mengetahui cara menggunakan Jump Link, sebelum kamu membaca tutorial ini. Secara default, Jump Link yang kita buat akan secara instant mengarahkan kita pada posisi target yang sudah kita tentukan di dalam sebuah postingan. Iya, secara instant. Seperti teleport, sekali klik langung pindah. Jika kamu kurang suka dengan sesuatu yang hambar seperti itu, maka tutorial ini akan sangat membantu kamu.


Untuk cara membuat Jump Link bisa kamu lihat sini:
Cara Membuat Jump Link Untuk Lompat Paragraf Pada Postingan Blog



Di tutorial ini Akira akan memberi tahu cara membuat efek Scroll pada Jump Link ketika aktif. Gampangnya, dari pada kita berpindah posisi secara instant, dengan cara ini maka tampilan Jump Link ketika aktif akan berubah, menjadi seperti kita melakukan scroll pada mouse. Tentu ini akan terlihat lebih menarik bagi pembaca.

Untuk caranya sangat mudah. Kamu hanya perlu menambahkan Script ini di atas </body> pada template blog kamu.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $('a[href^="#"]').on('click',function (e) {
     e.preventDefault();

     var target = this.hash,
     $target = $(target);

     $('html, body').stop().animate({
         'scrollTop': $target.offset().top
     }, 900, 'swing', function () {
         window.location.hash = target;
     });
 });
});
//]]>
</script>

Ketika selesai, save template. Done! Mudah bukan?



author: Akira Asayami