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.

3 komentar di “Tutorial Smooth Scroll dengan jQuery”

1. @ariyanto says:

   September 3, 2010 at 10:06

   sangar

   Reply
   • Brian Arfi says:

     September 4, 2010 at 10:28

     opone sing sangar mas @ariyanto?

     Reply
2. codejunior says:

   October 14, 2011 at 09:38

   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

   Reply

Tinggalkan Komentar

Name (required)

Mail (required)

Website

CAPTCHA Code *