Klik jQuery Scroll Berdasarkan Url ID
Klik jQuery Scroll Berdasarkan Url ID

awproject.net – Jadi simpelnya gini sob, untuk beberapa kasus di dalam link memiliki url domain.com/halaman#idelemen Dimana ketika membuka url tersebut pada halaman tersebut secara otomatis browser akan menscroll ke elemen yang memiliki id = idelemen sesuai dengan contoh di atas.

Karena efek yang diberikan sekejab mata maka kita buat agar lebih kelihatan smooth dengan menggunakan jQuery. Nah gimana caranya? berikut scriptnya sob.

<a class="click-scroll" href="domain.com/halaman#idelemen">
    Klik Scroll
</a>

Kemudian berikut ini kode jQuery sob.

$(document).on('click','.comments-link a', function(event){
     event.preventDefault();
     var target = $(this).attr('href').split('#');
     var html_id = $( '#'+ target[1] );

     $('html, body').animate({
        scrollTop: html_id.offset().top
     }, 1000);
});

Dan yang terakhir ini ketika sobat sekalian membuka URL yang memiliki ID secara otomatis akan memberikan efek scroll sesuai dengan elemen ID

if (window.location.hash) {
     var hash = window.location.hash;
     $('html, body').animate({
          scrollTop :  $(hash).offset().top
     }, 1000);
};

Terakhir jangan lupa untuk memanggul library jQuerynya ya sob … semoga berguna terima kasih.

widhy980

Blogger, Web Developer & Traveler

Hi, I am from Indonesia, and i have more interest about website development. i have good skill on Codeigniter, Wordpress, HTML x CSS and Bootstrap. have a business? please contact me ... :D

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *