Cara Memberi Efek Smooth Jump Link di Blog
Nah dalam kasus tersebut, link yang diklik menuju ke bagian lain namun dalam satu halaman, sehingga terjadilah efek scroll ketika tautan kita klik. Berbeda jika kasusnya adalah link yang menaut ke halaman lain, tidak mungkin menimbulkan efek scroll seperti kasus sebelumnya.
Namun, perlu kita ketahui bahwasannya defaultnya HTML ketika kita menaut dari satu halaman ke halaman yang sama, yang terjadi adalah tampilan akan berpindah ke link yang dituju namun tanpa efek scroll. Jadi.. kita memerlukan kode lain agar jump link bisa memiliki efek scroll yang smooth sehingga pengunjung blog akan lebih betah dan nyaman.
Nah, kira-kira kode apa yang akan kita gunakan?
Kode yang digunakan adalah jQuery, tentu dengan menambahkan kode jQuery (untuk Efek smooth scroll) dengan benar ke dalam template blog kita, maka jump link yang kita buat di blog kita akan memiliki efek scroll yang sangat smooth dan enak dipandang.
Sedikit yang perlu kamu ketahui, alasan untuk kita menggunakan kode jQuery dalam kasus ini adalah karena salah satu dari fungsi jQuery adalah memberikan animasi dalam suatu halaman web dan merespon interaksi user dengan halaman. Seperti halnya ketika kita membuat jump link, maka ketika user mengkilik jump link akan ada respon yang diberikan oleh halaman web berupa efek smooth scroll dari kode jQuery tadi..
Lalu bagaimana cara menambahkan kode smooth scroll ke dalam template blog? Berikut langkah-langkah yang perlu kamu lakukan :
1. Pertama kali yang perlu dilakukan adalah dengan memanggil jQuery ke dalam blogmu menggunakan Java Script berikut, tepat di bawah kode </
head>. Abaikan jika sudah terpasang!<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>2. Setelah itu, pasang kode jQuernya di atas 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 jQuery terpasang, kamu bisa langsung membuat jump linknya. Jika kamu belum tau cara membuat jump linknya, silahkan buka artikel berikut.Sedikit informasi buat kamu, bahwa jumplink ini bisa kamu gunakan di dalam artikel seperti memberikan Daftar isi di dalam post yang kamu buat atau mungkin langsung kamu terapkan pada menu blog yang mengarah ke dalam satu halaman.
Demikian Cara Memberi Efek Smooth Jump Link di Blog, semoga artikel ini bermanfaat..
Jangan lupa tinggalkan komentarmu.. serta bagikan artikel ini ke teman-temanmu mungkin mereka membutuhkan..
Baca juga artikel yang lain..
