Blog Kang Ismet

jQuery Smooth Scrolling to Anchor Point - Mungkin sobat pernah melihat beberapa web seperti Wikipedia, apabila di klik tautan maka akan meloncat kepada paragaph tertentu. Inilah yang akan saya jelaskan saat ini. Bedanya, apabila di wikipedia, tidak menggunakan smooth scrolling.

Sebelum menjelaskan cara pembuatannya, untuk lebih jelasnya silahkan kunjungi dulu halaman demo.


Untuk menerapkannya pada template, simpan kode ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $('a[href^="#"]').on('click',function (e) {
     e.preventDefault();

     var target = this.hash,
     $target = $(target);

     $('html, body').stop().animate({
         'scrollTop': $target.offset().top
     }, 900, 'swing', function () {
         window.location.hash = target;
     });
 });
});
//]]>
</script>

Cara menggunakannya sobat hrus menulis pada postingan dengan mode HTML. Contoh link :

<a href="#services">Services</a>

Untuk menentukan pargraf yang dituju, sobat harus menambahkan id yang sesuai dengan link tadi, contoh :

<div id="services">
.....
isi paragraf
.....
</div>

Untuk mengatur ketinggian dari batas atas browser, misalkan sobat menggunakan floating menu, maka tambahkan jarak pada script sebelumnya (lihat ke atas). Untuk menambahkannya pada baris yang seperti ini:

'scrollTop': $target.offset().top - 60

Masih ada pertanyaan? silahkan diskusikan di kolom komentar.