Tutorial Smooth Scroll dengan jQuery
Di era ini, sudah lazim adanya membuat sebuah website yang bagus dan punya animasi sederhana menarik tidak harus menggunakan Flash. Nah, tutorial kali ini adalah sedikit tips untuk mempercantik website anda dan meningkatkan usability secara umum.
Jika ingin membuat link pada satu halaman dengan effect scroll yang halus atau yang sering disebut dengan Smooth Scroll ada baiknya anda menyimak tutorial berikut.
Dengan bantuan jQuery untuk membuat effect Smooth Scroll ini akan sangat mudah untuk implementasinya, pertama copy script dibawah ini :
$(function(){
$('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}, 1000);
return false;
}
}
});
});
selanjutnya anda tinggal membuat link dng anchor menuju ID pada HTML tag yang ingin anda tuju, lebih jelasnya sebgai berikut :
Yang perlu anda perhatikan adalah tujuan link pada anchor text dan ID pada HTML tag tujuan (highligt merah pada gambar), Selamat mencoba.
sangar
opone sing sangar mas @ariyanto?
nggak ngerti maksudnya codenya gan, kalo bisa tolong dikasih penjelasannya, biar kita tahu maksudnya.
kirim ke email saya yah. please
I have to know aboout its souce code