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

[code type=php]

<script src=”jquery-1.10.2.js”></script>
<script src=”animatescroll.js”></script>

[/code]

Selanjutnya anda bisa membuat link dengan Format seperti berikut

[code type=php]

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

[/code]

Penjelasan. untuk hrefnya dikosongkan saja atau diisi #

lalu event onclicknya diisi dengan

[code type=php]

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

[/code]

 #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

[code type=php]

<div id=’section-2′></div>

[/code]

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




Please follow and like us:

Leave a Reply

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.