Media informasi Entertainment, Tutorial Blogger, Blogger Template, Fakta Unik, Teknologi, And More

Search This Blog

Membuat Smooth Scroll Pada Anchor Point di Blogger

Jquery Smooth Scrolling to anchor point
Membuat Smooth Scroll Pada Anchor Point di Blog - Halo sobat, kali ini saya akan membagikan artikel yang seperti biasa semoga dapat bermanfaat untuk sobat semua, sebelumnya, saya malu membagikan sebuah artikel yang saya dapat dari berbagai blog, tapi mau bagaimana lagi, skill saya dalam Blogger masih di bilang sangat Awam (Newbie), dan saya minta maafnya jika ada pihak yang dirugikan, karena semua ini Just For Fun,

OK, artikel ini saya dapat dari +Kang Ismet , dalam blognya yaitu blog.kangismet.net, sebuah blog yang sangat menginspirasikan para bloggers Indonesia :)

Sebelum menjelaskannya alangkah baiknya sobat melihat Demo nya terlebih dahulu


Untuk menerapkannya, simpan script dibawah ini pada template sobat, dan simpan diatas </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 harus 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 tanya pada Kang Ismet :P, selesai sudah artikel ini, saya ucapkan maaf apabila ada kesalahan dalam menulis, karena semua hanyalah Just For Fun, Selamat mencoba dan semoga berhasil, -Happy Blogging-

Resource : http://blog.kangismet.net/2013/10/membuat-smooth-scroll-pada-anchor-point.html
Ditulis oleh: Pada :
Label : Tutorial Blogger

Post a Comment