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.