Kali ini, saya akan mengajarkan cara membuat tombol "Back To Top"

Membuat tombol Back To Top

Kali ini, saya akan mengajarkan cara membuat tombol "Back To Top"

Dan akan ada 2 versi yang akan dibuat di artikel ini, satu versi biasa dan sangat mudah untuk dibuat, yang satu sedkit lebih susah tapi lebih bagus hasilnya :D

Ane akan mulai dengan yang paling mudah dulu:

Cara paling mudah dalam membuat tombol back to top adalah dengan memberikan "#top" sebagai value dari atribut href di tag <a>

Jadi, hanya dengan <a href="#top">Back to top</a>, tombol back to top dapat dibuat dengan mudah

Coba klik disini untuk live demonya

 

Cara yang sedikit lebih susah menggunakan jquery:

Pertama, ketik kode ini dulu (jangan lupa include jquery dulu ya):

function atas() {
  $('html, body').animate({
    scrollTop: 0
  }, 1500);
}


Setelah itu, cukup dengan <a href="javascript:atas();">Back to top</a>, tombol back to top ala jQuery ini bisa dibuat, keunggulan dari back to top ala jQuery adalah ada animasinya sehingga lebih mantap :D

Klik disini untuk mencoba back to top ala jquery

 

Sekian dari ane, semoga bermanfaat


About Author

Richard


Comment & Discussions

    Please LOGIN before if you want to give the comment.