Back To Top Button Html Css Js

MUAZHAN

4 min read

·

Jun 28, 2024

30

Share

Membuat Tombol "Kembali ke Atas" dengan HTML, CSS, dan JavaScript

Tombol "Kembali ke Atas" adalah fitur umum pada situs web yang membantu pengguna dengan cepat kembali ke bagian atas halaman. Artikel ini akan memandu Anda melalui proses pembuatan tombol ini menggunakan HTML, CSS, dan JavaScript.

1. HTML: Struktur Tombol

Pertama, kita perlu menambahkan HTML untuk tombol "Kembali ke Atas":

  
  
  
  



  Kembali ke Atas

  

Kode di atas menambahkan tombol dengan ID backToTopBtn dalam body halaman.

2. CSS: Styling Tombol

Sekarang, mari tambahkan beberapa CSS untuk menata tombol:

/* style.css */
#backToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none; /* Sembunyikan tombol awalnya */
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000; /* Pastikan tombol di atas konten lainnya */
}

#backToTopBtn:hover {
  background-color: #3e8e41;
}

CSS ini melakukan beberapa hal:

• position: fixed;: Meletakkan tombol pada posisi tetap relatif terhadap jendela browser.
• bottom: 20px; right: 20px;: Menempatkan tombol di bagian bawah kanan halaman dengan jarak 20px dari tepi.
• display: none;: Menyembunyikan tombol secara default.
• background-color: #4CAF50;: Menentukan warna latar belakang tombol.
• color: white;: Menentukan warna teks tombol.
• padding: 10px 20px;: Menambahkan padding ke tombol.
• border: none;: Menghilangkan border tombol.
• border-radius: 5px;: Membulatkan sudut tombol.
• cursor: pointer;: Mengubah kursor mouse menjadi pointer ketika melayang di atas tombol.
• z-index: 1000;: Meletakkan tombol di atas konten lainnya pada halaman.

3. JavaScript: Fungsionalitas Tombol

Terakhir, kita perlu menambahkan JavaScript untuk membuat tombol berfungsi:

// script.js

const backToTopBtn = document.getElementById('backToTopBtn');

// Tampilkan tombol saat pengguna menggulir ke bawah 
window.onscroll = function() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
};

// Peristiwa klik tombol
backToTopBtn.addEventListener('click', () => {
  document.body.scrollTop = 0; // Untuk IE & Chrome
  document.documentElement.scrollTop = 0; // Untuk Safari & Opera
});

JavaScript ini melakukan:

• Memilih elemen tombol: Menentukan variabel backToTopBtn yang merujuk ke tombol yang akan dikontrol.
• Peristiwa pengguliran: Saat pengguna menggulir ke bawah, JavaScript akan memeriksa apakah pengguna telah menggulir lebih dari 20 piksel. Jika ya, tombol akan ditampilkan. Jika tidak, tombol akan disembunyikan.
• Peristiwa klik: Ketika pengguna mengklik tombol, halaman akan di-scroll kembali ke bagian atas.

Kesimpulan

Sekarang Anda telah belajar bagaimana membuat tombol "Kembali ke Atas" dengan HTML, CSS, dan JavaScript. Anda dapat menyesuaikan desain dan fungsionalitas tombol sesuai kebutuhan Anda.