tombol back to top Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/tombol-back-to-top/ Tue, 28 Apr 2026 09:18:37 +0000 id hourly 1 https://wordpress.org/?v=7.0 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png tombol back to top Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/tombol-back-to-top/ 32 32 Cara Membuat Back to Top Button Smooth Scroll (HTML CSS) https://farhanhidayat.com/cara-membuat-back-to-top-button/ https://farhanhidayat.com/cara-membuat-back-to-top-button/#respond Tue, 28 Apr 2026 09:18:37 +0000 https://farhanhidayat.com/?p=2485 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 […]

Artikel Cara Membuat Back to Top Button Smooth Scroll (HTML CSS) pertama kali tampil pada Farhanhidayat.com.

]]> 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.

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.

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.

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.

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.

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

Artikel Cara Membuat Back to Top Button Smooth Scroll (HTML CSS) pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/cara-membuat-back-to-top-button/feed/ 0