Cara Membuat Smooth Scroll Pada Anchor Point

Make a smooth scrolling to anchor point - Gaeez di postingan sebelumnya kita udah membahas tentang cara membuat tombol back to top yang asik, nah sekarang kita mau bahas tentang cara membuat smooth scroll pada anchor point.

Apa sih itu?

Gampangnya perhatiin deh blog kita suryosama.blogspot.com coba kamu klik tombol posting / KTKJ / popular post yang ada pada awal blog / home. Apabila tautan diklik maka akan loncat ke heading tertentu.

Demo

Pertama kamu harus udah ada kode jQuery ini di atas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Untuk menerapkannya pada template blog kamu, 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 kamu harus menambahkan kode ini pada template / isi postingan kamu, dengan mode HTML. Contoh:

<a href="#Heading2">KTKJ</a>

Untuk menentukan point yang akan dituju, kamu harus menambahkan id yang sesuai dengan link tadi, contoh:

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

Sekali lagi thanks banget nih buat Kang Ismet yang udah kasih tutorial ini. Semoga bermanfat ya gaez. :)