Home Coding Cara Membuat Back to Top Button Smooth Scroll (HTML CSS)

Cara Membuat Back to Top Button Smooth Scroll (HTML CSS)

Farhan Hidayat 28 April 2026 4 min read

Pernah scroll panjang di sebuah website lalu kesulitan kembali ke bagian atas? Nah, di sinilah fungsi back to top button jadi sangat penting. Selain mempermudah navigasi, fitur ini juga bikin tampilan website terasa lebih modern. Di artikel ini, kamu akan belajar cara membuat back to top button dengan efek smooth scroll menggunakan HTML dan CSS secara praktis dan tanpa ribet.

Apa Itu Back to Top Button dan Kenapa Penting?

Back to top button adalah tombol yang biasanya muncul di pojok kanan bawah layar saat pengguna mulai scroll ke bawah. Ketika diklik, tombol ini akan membawa pengguna kembali ke bagian atas halaman.

Selain itu, fitur ini punya beberapa manfaat penting. Pertama, pengguna tidak perlu lagi scroll manual yang panjang. Kedua, pengalaman pengguna (UX) jadi lebih nyaman. Bahkan, pada website dengan konten panjang seperti blog atau landing page, tombol ini bisa meningkatkan interaksi.

Persiapan Sebelum Membuat Back to Top Button

Sebelum mulai coding, ada beberapa hal sederhana yang perlu kamu siapkan.

Also Read: Cara Membuat Accordion FAQ Simple dengan HTML, CSS & JS

Struktur Dasar HTML

Kamu hanya butuh elemen sederhana seperti anchor link:

<a href="#" class="back-to-top">↑</a>

Elemen ini nantinya akan jadi tombol utama.

Styling Dasar dengan CSS

Selanjutnya, kamu perlu mengatur posisi tombol agar selalu terlihat. Biasanya digunakan position: fixed supaya tombol tetap berada di tempat meskipun halaman di-scroll.

Also Read: 7 Efek Shadow & Glassmorphism CSS yang Bikin Website Mewah

Konsep Smooth Scroll

Agar pergerakan scroll terasa halus, kamu bisa memanfaatkan properti CSS:

html {
  scroll-behavior: smooth;
}

Dengan cara ini, kamu tidak perlu JavaScript tambahan untuk efek dasar.

Cara Membuat Back to Top Button (Step-by-Step)

Sekarang kita masuk ke bagian inti, yaitu langkah-langkah membuatnya.

Also Read: Panduan Membuat Modal Popup Interaktif HTML CSS JS

1. Membuat Struktur HTML

Tambahkan kode berikut di dalam <body>:

<a href="#" class="back-to-top">
  <i class="fas fa-arrow-up"></i>
</a>

2. Menambahkan CSS untuk Tampilan

Gunakan CSS berikut untuk styling:

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #10b981;
  color: #fff;
  padding: 12px 14px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  display: none;
  transition: all 0.3s ease;
}

.back-to-top:hover {
  background: #059669;
  transform: translateY(-3px);
}

Dengan styling ini, tombol akan terlihat simpel tapi tetap modern.

Also Read: 5 Toggle Switch CSS Mirip iOS + Cara Membuatnya

3. Menambahkan Efek Smooth Scroll

Seperti yang sudah dijelaskan sebelumnya, cukup tambahkan:

html {
  scroll-behavior: smooth;
}

4. Menampilkan Tombol Saat Scroll

Agar tombol tidak selalu muncul, kamu bisa tambahkan JavaScript:

<script>
window.addEventListener("scroll", function() {
  const button = document.querySelector(".back-to-top");
  if (window.scrollY > 200) {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
});
</script>

Dengan begitu, tombol hanya muncul saat dibutuhkan.

Also Read: Cara Mudah Membuat Sticky Navbar Saat Scroll (HTML & CSS)

Contoh Hasil Back to Top Button yang Responsive

Setelah semua langkah selesai, tombol akan muncul di pojok kanan bawah saat pengguna scroll ke bawah. Selain itu, tampilannya tetap rapi di desktop maupun mobile.

Untuk versi mobile, kamu bisa sedikit menyesuaikan ukuran:

@media (max-width: 600px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    padding: 8px 12px;
  }
}

Kesalahan yang Sering Terjadi

Meskipun terlihat sederhana, ada beberapa kesalahan yang sering terjadi. Misalnya, tombol tidak muncul karena JavaScript tidak berjalan. Selain itu, posisi tombol kadang menutupi konten penting. Bahkan, ada juga yang lupa menambahkan smooth scroll sehingga gerakannya terasa kaku.

Oleh karena itu, pastikan semua bagian sudah terpasang dengan benar.

Tips Biar Hasil Lebih Maksimal

Agar hasilnya lebih profesional, kamu bisa tambahkan beberapa sentuhan tambahan. Misalnya, gunakan icon panah dari library seperti Font Awesome. Selain itu, tambahkan animasi fade in agar tombol muncul lebih halus.

Kemudian, pastikan warna tombol kontras dengan background. Namun, tetap sesuaikan dengan branding website agar terlihat konsisten.

Kesimpulan

Sekarang kamu sudah paham cara membuat back to top button dengan smooth scroll menggunakan HTML dan CSS. Prosesnya cukup sederhana, tetapi hasilnya sangat berdampak pada kenyamanan pengguna.

Dengan menambahkan fitur ini, website kamu tidak hanya terlihat lebih modern, tetapi juga lebih ramah digunakan. Jadi, jangan ragu untuk langsung mencoba dan mengembangkannya sesuai kebutuhan.

FAQ

1. Apakah tombol scroll ke atas wajib digunakan?

Tidak wajib, tetapi sangat disarankan untuk halaman dengan konten panjang.

2. Apakah smooth scroll bisa tanpa JavaScript?

Bisa, cukup gunakan CSS scroll-behavior: smooth.

3. Bagaimana agar tombol muncul saat scroll saja?

Gunakan JavaScript untuk mendeteksi posisi scroll dan mengatur visibilitas tombol.

Untuk memahami lebih dalam tentang smooth scroll dan implementasinya, kamu bisa membaca dokumentasi resmi di MDN Web Docs serta beberapa referensi UI modern.

Kalau kamu ingin langsung punya artikel SEO-friendly yang siap ranking, sekaligus tampilan website yang lebih profesional dengan tema WordPress premium, kamu juga bisa cek layanan yang satu ini 👇

ArtikelPro

Tagged with: