Pada kesempatan kali ini saya akan menjelaskan cara membuat tombol back to top dengan html dan javascript. Perlu teman-teman ketahui sebelumnya, tombol back to top yang saya contohkan disini, dimana seperti yang teman-teman lihat di website lain pada umumnya. Fungsi dari tombol halaman tersebut adalah, untuk kembali kehalaman paling atas dari sebuah halaman di website. Dengan fasilitas tersebut salah satu tujuannya adalah untuk menghemat waktu, jika yang biasanya dengan scroll manual untuk kembali ke halaman website, kini dengan adanya feature tersebut di suatu website maka dapat membantu dan menghemat waktu pengunjung. Untuk membuat feature tersebut, teman-teman bisa ikuti langkah-langkah yang saya contohkan di bawah ini :

Berikut Tahapan-Tahapannya :

  • Pada contoh disini saya menggunakan style Bootstrap, untuk membuat tombol Back To Top nya.
  • Jika teman-teman tidak menggunakan bootstrap, buat terlebih dahulu untuk kode css tombol Back To Top nya.
  • Disini saya asumsikan teman-teman sudah tidak ada kesulitan dalam pembuatan tombol Back To Top yah.
  • Selanjutnya, teman-teman buat satu buah file dengan nama index.html, dan ketikan kode seperti berikut :

  • Untuk pemanggilan kebutuhan file css, javascript, dan file jquery, disini saya menggunakan CDN ( langsung dari server bootstrap dan jquery ).
  • Jika sudah teman-teman save terlebih dahulu file index.html tersebut, dan lihat hasilnya di browser kesayangan teman-teman.
  • Jika kode yang teman-teman ketikan sama persis dengan yang saya contohkan di atas, maka akan menghasilkan output seperti gambar berikut:

cara membuat tombol back to top dengan html dan javascript

  • Jika dilihat dari tampilan berikut, ketika halaman template dari output tersebut teman-teman scroll ke bawah, maka akan menampilkan tombol Back To Top tersebut seperti tombol yang berwarna merah pada gambar di atas, dan apabila tombol tersebut di klik maka akan otomatis ke halaman paling atas template tersebut.

Sampai disini penjelasan saya mengenai cara membuat tombol back to top dengan html dan javascript, semoga bermanfaat.