Panduan Lengkap: Membuat Tombol 'Back to Top' dengan Efek Smooth Scroll pada Website Anda

Langkah 1: Menyiapkan Kode HTML

Pertama, kita membutuhkan sebuah tombol pada halaman web kita. Kode HTML di bawah ini menunjukkan pembuatan tombol "Back to Top" dengan ID "back-to-top-button".

<button id="back-to-top-button" title="Go to top">
  <span class="arrow-up"></span>
</button>

Di sini, tombol tersebut tersembunyi secara awal (dengan properti display: none;) dan hanya akan muncul ketika pengguna menggulir ke bawah melebihi 300 piksel dari bagian atas halaman.

Langkah 2: Membuat Kode CSS

Kemudian, kita perlu menentukan gaya untuk tombol tersebut menggunakan CSS. Kode CSS di bawah ini menetapkan tata letak, warna, dan efek hover untuk tombol "Back to Top":

/* Back to top button styles */
#back-to-top-button {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 12px 16px;
  cursor: pointer;
  z-index: 1000;
  transition: background-color 0.3s, transform 0.3s;
}

#back-to-top-button:hover {
  background-color: #0056b3;
}

.arrow-up {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

/* Show the button when the user scrolls down */
body::-webkit-scrollbar-thumb {
  background-color: #007BFF;
}

/* Change button color when scrolling */
body::-webkit-scrollbar-thumb:hover {
  background-color: #0056b3;
}

Properti CSS di atas menentukan posisi, warna, efek hover, dan ikon panah atas (".arrow-up") untuk tombol tersebut, memberikan tampilan yang menarik dan interaktif.

Langkah 3: Kode JavaScript

Kemudian, agar tombol berfungsi seperti yang diinginkan, kita membutuhkan kode JavaScript.

/ Get the button element
var backButton = document.getElementById("back-to-top-button");

// Show the button when the user scrolls down 300px from the top of the document
window.onscroll = function() {
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    backButton.style.display = "block";
  } else {
    backButton.style.display = "none";
  }
};

// Scroll to the top of the document smoothly when the button is clicked
backButton.addEventListener("click", function() {
  scrollToTop(1000); // Adjust the scroll duration (in milliseconds) as needed
});

// Function to smoothly scroll to the top of the document
function scrollToTop(duration) {
  const start = performance.now();
  const startY = window.pageYOffset;
  const distance = -startY;
  const easing = function(t) {
    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
  };

  function step(currentTime) {
    const elapsedTime = currentTime - start;
    if (elapsedTime < duration) {
      window.scrollTo(0, startY + distance * easing(elapsedTime / duration));
      requestAnimationFrame(step);
    } else {
      window.scrollTo(0, startY + distance);
    }
  }

  requestAnimationFrame(step);
}

Agar tombol berfungsi seperti yang diinginkan, kita memerlukan kode JavaScript. Berikut adalah penjelasan mengenai fungsi-fungsi JavaScript yang digunakan:

• window.onscroll: Ini adalah event listener yang mengamati pergerakan pengguna saat menggulir. Jika pengguna telah menggulir lebih dari 300 piksel dari bagian atas halaman (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300), tombol akan ditampilkan. Jika tidak, tombol akan disembunyikan.
• backButton.addEventListener("click", function() {...}): Ini adalah event listener untuk menanggapi klik tombol. Saat tombol diklik, fungsi scrollToTop(duration) akan dipanggil.
• function scrollToTop(duration) {...}: Fungsi ini bertanggung jawab untuk menggulir halaman secara lancar kembali ke bagian atas dokumen. Durasi scroll (dalam milidetik) dapat diatur sesuai keinginan.

Dengan menggabungkan ketiga langkah ini, kita menciptakan tombol "Back to Top" dengan efek smooth scroll yang tidak hanya memperbaiki navigasi pengguna, tetapi juga memberikan pengalaman pengguna yang lebih baik saat menjelajahi halaman web dengan konten yang panjang. Semoga penjelasan ini membantu pembaca memahami cara kerja dan manfaat dari kode yang telah disediakan, membimbing mereka menuju pengalaman pengguna yang lebih nyaman dan efisien di situs web mereka.

Baca juga : Teknik Scroll Otomatis: Menjadikan Konten Lebih Dinamis dan Mudah Diakses

Kesimpulan

Dalam dunia web yang terus berkembang, memberikan pengalaman pengguna yang optimal adalah kunci untuk mempertahankan pengunjung di situs web Anda. Dalam panduan ini, kita telah membahas cara implementasi tombol "Back to Top" dengan efek smooth scroll, sebuah fitur sederhana namun sangat berharga yang meningkatkan navigasi pengguna. Dengan memberikan kemudahan bagi pengguna untuk kembali ke bagian atas halaman tanpa usaha yang berlebihan, Anda tidak hanya meningkatkan kenyamanan mereka tetapi juga meningkatkan retensi pengunjung situs Anda.

Menyematkan tombol "Back to Top" ini tidak hanya tentang memberikan kemudahan navigasi, tetapi juga menciptakan kesan profesional dan peduli terhadap pengalaman pengguna. Dengan mengikuti langkah-langkah yang telah kami bagikan, Anda memiliki alat tambahan untuk mengoptimalkan situs web Anda, mengurangi geseran (friction), dan meningkatkan interaksi pengguna dengan konten Anda.

Penting untuk diingat bahwa keberhasilan situs web tidak hanya diukur dari seberapa bagus tata letaknya atau seberapa banyak kontennya. Pengalaman pengguna yang nyaman adalah pondasi utama yang membuat pengunjung betah dan kembali lagi. Dengan mengintegrasikan tombol "Back to Top" dengan efek smooth scroll, Anda tidak hanya menciptakan situs yang lebih baik secara teknis, tetapi juga menggambarkan perhatian Anda terhadap kepuasan pengguna.