htmlcssjavascriptscrollkomponenPemula8 mnt baca

Tombol Back to Top

Tombol melayang yang muncul saat scroll jauh dan mengantar kembali ke atas dengan mulus.

Kenapa Back to Top?

Di halaman panjang, scroll manual ke atas melelahkan (apalagi di HP). Tombol "kembali ke atas" yang muncul hanya saat dibutuhkan adalah standar UX yang dipakai semua situs berita dan dokumentasi.

Langkah Membangun

HTML: Satu <button id="keAtas">↑</button> di akhir body.

CSS: Tombol memakai position: fixed; bottom: 24px; right: 24px berbentuk lingkaran. Awalnya tersembunyi (opacity: 0; pointer-events: none), muncul dengan class tampil (opacity: 1) plus transisi agar fade-in mulus, bukan muncul tiba-tiba.

JS: Dua bagian:

  1. Event scroll: tampilkan tombol jika scrollY > 400.
  2. Klik tombol: window.scrollTo({ top: 0, behavior: "smooth" }). Opsi behavior: "smooth" membuat browser menganimasikan scroll secara bawaan, tanpa library.

Kenapa pointer-events?

Tombol tak terlihat tapi tetap bisa diklik akan membingungkan (klik kosong tiba-tiba naik ke atas). pointer-events: none memastikan tombol benar-benar "tidak ada" saat tersembunyi.

Kesalahan Umum

  • Tombol selalu terlihat bahkan di halaman pendek (sembunyikan jika halaman tidak bisa di-scroll).
  • Scroll smooth tidak jalan di browser lama (fallback: cek dukungan atau biarkan lompat instan).
  • Tombol menutupi konten penting di HP (beri jarak cukup dari tepi).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Progress Melingkar

Ubah tombol back-to-top menjadi lingkaran progress: border tombol terisi sesuai persen scroll (pakai conic-gradient yang diupdate via JS), dengan panah ↑ di tengahnya.