Membuat Smooth Scroll Pada Anchor Point

jMungkin 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.

• 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

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post