Back To Top Arrow Html

MUAZHAN

5 min read

·

Jun 28, 2024

22

Share

Tombol "Kembali ke Atas" dengan HTML

Tombol "Kembali ke Atas" (Back to Top) adalah elemen umum di situs web yang memungkinkan pengguna untuk dengan mudah kembali ke bagian atas halaman, terutama pada halaman web yang panjang. Ini adalah cara yang sederhana namun efektif untuk meningkatkan navigasi dan pengalaman pengguna.

Berikut adalah panduan langkah demi langkah untuk menambahkan tombol "Kembali ke Atas" ke halaman web Anda menggunakan HTML dan CSS:

1. Menambahkan Tombol HTML

Pertama, tambahkan elemen HTML untuk tombol "Kembali ke Atas". Anda dapat menggunakan tag <a> dengan atribut href="#" untuk membuat tautan ke bagian atas halaman.

Kembali ke Atas

• href="#": Atribut ini membuat tautan menuju bagian atas halaman.
• class="back-to-top": Atribut ini digunakan untuk menambahkan kelas ke tombol sehingga Anda dapat memformatnya dengan CSS.

2. Menambahkan Gaya CSS

Selanjutnya, tambahkan gaya CSS untuk tombol "Kembali ke Atas". Anda dapat menyesuaikan tampilan dan posisi tombol sesuai dengan kebutuhan desain Anda.

.back-to-top {
  display: none; /* Sembunyikan tombol secara default */
  position: fixed; /* Posisikan tombol tetap di layar */
  bottom: 20px; /* Jarak dari bawah layar */
  right: 20px; /* Jarak dari kanan layar */
  padding: 10px; /* Padding di dalam tombol */
  background-color: #4CAF50; /* Warna latar belakang */
  color: white; /* Warna teks */
  text-decoration: none; /* Hilangkan garis bawah */
  border-radius: 5px; /* Sudut tombol */
  cursor: pointer; /* Ubah kursor menjadi pointer */
}

.back-to-top:hover {
  background-color: #3e8e41; /* Warna latar belakang saat mouse di atas tombol */
}

.back-to-top.show {
  display: block; /* Tampilkan tombol ketika pengguna menggulir ke bawah halaman */
}

• .back-to-top: Aturan ini digunakan untuk mengatur gaya dasar tombol "Kembali ke Atas".
• display: none: Atribut ini menyembunyikan tombol secara default.
• position: fixed: Atribut ini membuat tombol tetap di layar saat pengguna menggulir halaman.
• bottom: 20px; right: 20px;: Atribut ini mengatur posisi tombol di pojok kanan bawah halaman.
• padding: 10px;: Atribut ini menambahkan jarak antara teks dan batas tombol.
• background-color: #4CAF50; color: white;: Atribut ini mengatur warna latar belakang dan teks tombol.
• text-decoration: none;: Atribut ini menghilangkan garis bawah dari teks tombol.
• border-radius: 5px;: Atribut ini membuat sudut tombol menjadi bulat.
• cursor: pointer;: Atribut ini mengubah kursor mouse menjadi pointer saat di atas tombol.
• .back-to-top:hover: Aturan ini mengatur gaya tombol saat mouse di atasnya.
• .back-to-top.show: Aturan ini digunakan untuk menampilkan tombol saat pengguna menggulir halaman ke bawah.

3. Menampilkan Tombol Saat Menggulir

Terakhir, Anda perlu menambahkan sedikit JavaScript untuk menampilkan tombol "Kembali ke Atas" saat pengguna menggulir ke bawah halaman.

window.addEventListener('scroll', function() {
  const backToTopButton = document.querySelector('.back-to-top');
  if (window.pageYOffset > 100) {
    backToTopButton.classList.add('show');
  } else {
    backToTopButton.classList.remove('show');
  }
});

Kode ini:

• Menambahkan event listener ke objek window untuk mendengarkan event scroll.
• Memilih tombol "Kembali ke Atas" menggunakan querySelector.
• Memeriksa posisi gulir halaman saat ini menggunakan window.pageYOffset.
• Jika posisi gulir lebih besar dari 100 piksel, maka tombol ditampilkan dengan menambahkan kelas show.
• Jika tidak, kelas show dihapus, sehingga tombol disembunyikan.

Kesimpulan

Dengan menggunakan HTML, CSS, dan sedikit JavaScript, Anda dapat dengan mudah menambahkan tombol "Kembali ke Atas" yang fungsional dan estetis ke halaman web Anda. Ini akan meningkatkan pengalaman pengguna dan membantu mereka dengan mudah menavigasi halaman web yang panjang.