Teknik Jquery link auto Scroll pada HTML

Assalamualaikum Wr.Wb

Sudah cukup lama , juga, pada kesempatan kali ini saya hanya memberikan teknik jquery yang sekarang umum digunakan di website-website company profile pada perusahaan. Sebenarnya saya bingung juga memberikan judul. Intinya jika anda menekan sebuah link, maka halmann akan scroll otomatis ke link yang anda tuju secara smooth. Kurang lebihnya anda bisa liat link Demo berikut

Sampai disini saya harap anda sudah dapat gambaran. Jadi Cukup dengan tekan Linknya tuh disini maka halaman akan di scroll kan seara otomatis oleh jquerya.

Disini sebenarnya bisa hanya menggunakan Bawaan dari jquery corenya, namun saya tambahkan animatescoll.js  sehingga lebih mudah digunakan dan ada efek bouncenya. Memantul.

Setelah load kedua script ini

1
2
<script src="jquery-1.10.2.js"></script>
<script src="animatescroll.js"></script>

Selanjutnya anda bisa membuat link dengan Format seperti berikut

1
<a href="#" onclick="$('#section-).animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});"><h2>linknya tuh disini</h2></a>

Penjelasan. untuk hrefnya dikosongkan saja atau diisi #

lalu event onclicknya diisi dengan

1
$('#section-2).animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});

 #section-2 adalah id tujuannya. scrollSpeed adalaha kecepatannya, nilai makin besar makin lama gesernya. easing sampain ke belakang adalah type pergerakannya.

lalu untuk area yang dituju tinggal di tambahi kode

1
<div id='section-2'></div>

Lalu jalankan Aplikasi anda. Harusnya jika sudah benar maka link anda akan menuju ke ID ke tempat yang sudah anda tuju. Dan harus dipastikan lagi bahwa teknik ini untuk 1 link dengan halaman yang sama.

daripada lama-lama anda pasti ingin liat scriptnya, monggo di download saja di

mirror1  atau mirror2

Oke Sekian dari tutorial kali ini semoga bermanfaat. Jangan Lupa Komen

Terima kasih

Wassalamualaikum Wr.Wb

Leave a Reply

Your email address will not be published. Required fields are marked *