aldiunanto.com

Cara membuat tombol go to top pada website

Terkadang ada beberapa website yang kontennya sangat panjang kebawah sehingga ketika kita sudah tidak sadar sudah men-scroll browser jauh kebawah untuk membaca artikel tersebut dan ingin kembali lagi ke atas untuk mencapai navbar misalnya, akan terasa sangat melelahkan kiranya jika kita harus men-scroll balik ke atas. Betul? Nah, Pada kasus kali ini, saya akan memberitahu bagaimana cara membuat tombol atau icon go to top untuk bisa scroll ke atas dengan mengklik tombol tertentu.

Pada kasus ini, kita akan membutuhkan sebuah bantuan dari file library yang sangat populer yaitu jQuery. Langsung saja ke TKP !!

  1. Import-lah terlebih dahulu file library jQuery tadi ke dalam tag <head>, taruh di bawah <title>.
  2. Kemudian buatlah sebuah elemen untuk ‘go to top’ itu sendiri, bisa gambar dengan gambar panah ke atas, ataupun tulisan ‘Back to top’.  Contoh (disini saya menggunakan teks) :
  3. Berilah make up, polesan, agar tombol tulisan ‘Go to top’ menjadi lebih cantik. Kita gunakan CSS, taruh di atas file library tadi yang sudah kita import.
  4. Daann… disinilah intinya, block kode untuk membuat tombol tadi berfungsi. Taruh setelah file library jQuery tadi.

Nah, untuk bisa melihat hasilnya secara langsung, sobat bisa membuka dengan mengklik link ini yang sudah saya siapkan sebelumnya agar sobat bisa lebih mengerti cara kerja script-script tersebut.

Ada pertanyaan? Atau sobat kurang jelas dan paham dan ingin dijelaskan?? Silahkan sobat bisa menanyakan hal tersebut di kolom komentar 😉 Terimakasih, semoga berguna!

One thought on “Cara membuat tombol go to top pada website

Leave a Reply

%d bloggers like this: