Cara Membuat Smooth Scroll ke Target (anchor), Atas (top) dan Bawah (bottom) Menggunakan JQuery


Hai teman-teman, kali ini saya akan membagikan sedikit tips bagaimana sih cara membuat smooth scroll menggunakan jQuery. Nah, tidak udah basa-basi, langsung aja ke codenya ya…

Membuat Scroll ke atas (top)

  • HTML
    1. Link : <a href="#to-top" class="to-top"> Scroll to Bottom </a>
    2. Target :
  • jQuery
    1. $('.to-top').click(function(){
    2. $("html, body").animate({ scrollTop: 0 }, 1000);
    3. return false;
    4. });

 

Membuat Scroll ke bawah (bottom)

  • HTML
    1. Link : <a href="#to-bot" class="to-bot"> Scroll to Bottom </a>
    2. Target :
  • jQuery
    1. $('.to-bot').click(function(){
    2. $("html, body").animate({ scrollTop: $(document).height() }, 1000);
    3. return false;
    4. });

 

Membuat Scroll ke target (anchor)

  • HTML
    1. Link : <a href="#to-anc" class="to-anc"> Scroll to Bottom </a>
    2. Target :
  • jQuery
    1. $('.to-anc').click(function(){
    2. $("html, body").animate({ scrollTop: $(this.hash).offset().top }, 1000);
    3. return false;
    4. });

2 pemikiran pada “Cara Membuat Smooth Scroll ke Target (anchor), Atas (top) dan Bawah (bottom) Menggunakan JQuery

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s