Animasi Back to Top/Scroll to Top dengan jQuery

Beberapa proyek gue terakhir bikin web sering punya scroll banyak kebawah karna konten yang banyak, kalo buat orang awam, makin kita scroll halaman web kebawah, makin ribet juga buat scroll balikin ke halaman paling atas (Apalagi menu utamanya yang nyantel terus tetep diatas halaman, jadi harus maksain jari telunjuk buat olahraga goyang2in scroll mouse keatas.. wkwk). Hal ini bikin ribet..

Untuk itu, para developer web kepikiran buat link Back to Top/Scroll to Top buat web2 yang punya skala konten yang besar. Dulu, sebelum ada jaman jQuery, link Back/Scroll to Top di beberapa website ketika di klik langsung ngejump ke paling atas halaman (karna masih simple, hanya menambahkan <a href="#">Scroll to Top</a>  aja sudah cukup :D) tanpa ada animasi. Tapi seiring perkembangan zaman, jQuery mempunyai modul jQuery Animate, yang bisa bikin Scroll to Top dibikin variasi menggunakan animasi.

Baiklah, postingan kali ini gue akan menjelaskan bagimana caranya buat link Back To Top pake animasi jQuery. Yuks kita mulai..

CSS

Bikin pake CSS ya.. biar keliat cantik & bisa dicustom 😀

Gak ada yang spesial disini, buat class dengan nama back-to-top & cuman nambahin warna, padding, & kita akan nempelin Scroll to Top ini nempel dibawah halaman, copas css di apitan <head>...</head> dengan style css  <style type="text/css">...</style>  di halaman HTML anda.

jQuery

Jangan lupa buat nambahin dulu master library jQuery sebelum copas jQuery dibawah ya..

Terus copas jQuery dibawah ini:

Pemahaman

Pada dasarnya, dari sisi CSS kita membuat sebuah class untuk anchor tag dengan nama back-to-top, dimana secara default tidak ditampilkan ke UI oleh CSS karena dihandle oleh display: none; kemudian dengan jQuery, setiap kali halaman diload, jQuery membuat sebuah anchor tag dengan jQuery append (Namun masih tetap tidak ditampilkan ke UI, karena ada pembanding antara jQuery scroll, offset & scrollTop).

Ketiga pembanding jQuery tersebut akan membandingkan dan membuat 2 statement: menyembunyikan atau menampilkan CSS back-to-top. Ketika user melakukan scroll kebawah terhadap halaman, maka nilai $('body').offset().top pasti akan lebih besar daripada nilai $(window).scrollTop() yang akan membuat class back-to-top dimunculkan dengan jQuery slideUp, dan sebaliknya, jika nilai  $('body').offset().top lebih kecil daripada nilai $(window).scrollTop() (ini terjadi saat posisi scroll sudah berada di paling atas halaman) maka akan menyembunyikan class back-to-top.

Selamat Mencoba 🙂

Content Protection by DMCA.com