Cara Membuat Smooth Scroll Anchor Point Dengan jQuery

Cara Membuat Smooth Scroll Anchor Point Dengan jQuery

Cara Membuat Smooth Scroll Anchor Point Dengan jQuery. jQuery Smooth Scrolling to Anchor Point - Diantara kalian mungkin pernah melihat b... 22.12.00

Cara Membuat Smooth Scroll Anchor Point Dengan jQuery. jQuery Smooth Scrolling to Anchor Point - Diantara kalian mungkin pernah melihat beberapa web seperti Wikipedia, apabila di klik tautan maka akan meloncat kepada paragrap tertentu. Saya antusias sekali dengan posting yang ada di sini berharap dapat berguna bagi bloger yang ingin membuat tutorial seperti dibawah ini. Belajar dan berbagi tutorial merupakan hal yang paling indah karena membuat kita semua senang. Tutorial dibawah ini berbeda dengan wikipedia, karena wikipedia tidak menggunakan smooth scrolling.

Sebelum menjelaskan cara pembuatannya, silakan 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 harus menulis pada postingan dengan mode HTML. Contoh link :

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

Untuk menentukan paragraf yang anda ingin tuju, harus menambahkan id yang sesuai dengan link tadi, contoh :

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

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

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

[source]