Blogger Templates

05 December 2013

Membuat tombol Back To Top

Kali ini, saya akan mengajarkan cara 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

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

Sekian dari ane, semoga bermanfaat

Sumber : jagocoding.com

No comments:

Post a Comment