Smooth Scroll Jump Link dengan jQuery

Selasa, 05 Desember 2017

Jump link merupakan ~~tautan yang melompat~~ suatu link yang jika di klik, akan menuju ke bagian halaman itu sendiri secara spesifik. Jadi, kita tidak perlu menggulir halaman terlalu banyak, tinggal klik jump link maka halaman akan menggulir menuju bagian yang ditentukan. Berikut contoh jump link :

Klik Saya !

Nah untuk membuat jump link beserta script agar gerakannya halus silahkan ikuti langkah berikut :

1. Seperti biasa pasang jQuery pada blog/website Anda. Abaikan jika sudah terpasang.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>

2. Pasang script berikut diatas tag </body>

 <script type='text/javascript'>
//<![CDATA[
$(function() {
//ScrollTo
  $('a[href*=#]').click(function() {if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {var $target = $(this.hash);$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');if ($target.length) {var targetOffset = $target.offset().top;$('html,body').animate({scrollTop: targetOffset - 80}, 1500, 'easeOutQuart');return false;}}});
});
//jQuery easing - custom
jQuery.extend(jQuery.easing,{easeOutQuart: function (x, t, b, c, d) {return -c * ((t=t/d-1)*t*t*t - 1) + b;}});
//]]>
</script>

3. Setelah scriptnya dipasang, sekarang tinggal membuat jump linknya :
- Untuk link pemanggil, buatlah anchor (link) dengan href #bagianyangdituju, contohnya seperti berikut.