Cara Menciptakan Pengaruh Smooth Scroll Untuk Jump Link Di Blog

Jumat, 26 Juni 2015

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


Untuk cara menciptakan Jump Link dapat kau lihat sini:
Cara Membuat Jump Link Untuk Lompat Paragraf Pada Postingan Blog



Di tutorial ini Akira akan memberi tahu cara menciptakan efek Scroll pada Jump Link saat aktif. Gampangnya, dari pada kita berpindah posisi secara instant, dengan cara ini maka tampilan Jump Link saat aktif akan berubah, menjadi menyerupai kita melaksanakan 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 sasaran = 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! Praktis bukan?



author: Akira Asayami

Share This :