Cara Membuat Tombol Back to Top di HTML

Cara Membuat Tombol Back to Top di HTML

Banba
Cara Membuat Tombol Back to Top di HTML

Hampir setiap website memiliki tombol Back to Top untuk membudahkan pengunjung kembali ke halaman paling atas dari halaman tersebut. Kali ini, saya akan memberikan sebuah tutorial bagaimana cara membuat tombol back to top di HTML.

Tombol back to top ini akan kita buat menggunakan HTML, CSS dan Javascript.  Nah, bagi teman-teman yang penasaran bagaimana cara pembuatannya. Berikut ini merupakan langkah-langkahnya.

Membuat tombol back to top

Pada tutorial  ini, terdapat dua style yang bisa kamu buat. Dengan animasi dan tanpa animasi. Berikut kedua cara pembuatannya:

Tombol Back to Top dengan Animasi

- Hal pertama yang akan kita lakukan adalah membuat tag <div> dengan class="back-to-top" di dalam tag <body>.

html
<div class='back-to-top'>
  ...
</div>

- Setelah itu, silahkan masukkan icon panah ke atas atau sejenisnya ke dalam tag tersebut. Disini saya menggunakan icon SVG, sehingga menjadi seperti ini.

html
<div class='back-to-top'>
  <svg viewBox="0 0 20 20"><polyline points="4 13 10 7 16 13"></polyline></svg>
</div>

- Kemudian mari kita percantik tampilannya menggunakan css, silahkan salin kode di bawah ini dan masukkan ke dalam tag <style> atau ke dalam file .css.

css
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: -40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: #072227;
  opacity: 0;
  border-radius: 50%;
  transition: .2s ease-in-out;
  z-index: 20px;
}

/* Untuk memunculkan tombol */
.back-to-top.show {
  bottom: 20px;
  opacity: 1;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

- Setelah kamu memasukkan kode css tadi, pasti tombol tersebut akan menghilang. Itu terjadi karena tombol tersebut sengaja di sembunyikan menggunakan property bottom: -40px;.

- Kemudian, kita akan membuat kode Javascript untuk tombol tersebut. Silahkan salin kode di bawah ini ke dalam tag <script> atau file .js.

js
var backToTop = document.querySelector('.back-to-top');

window.addEventListener('scroll', () => {
  if ( this.scrollY >= 400 ) {
    backToTop.classList.add('show');

    backToTop.addEventListener('click', () => {
      window.scrollTo({top: 0});
    })
  } else {
    backToTop.classList.remove('show');
  }
});

Kode terpenting dari kode tersebut adalah window.scrollY dan window.scrollTo. Lebih jelasnya, kamu bisa baca-baca tentang maksud dari dua kode tersebut di internet.

Tada, sekarang tombol Back to Top kamu sudah jadi.

Tombol Back to Top tanpa Animasi

- Perlu kamu ingat, tombol back to top tanpa animasi ini akan terus muncul walaupun kamu berada di posisi paling atas dari halaman kamu. Pada Blog ini juga, saya menggunakan tombol tanpa animasi ini. Untuk cara membuatnya sangat mudah. Silahkan salin kode di bawah ini:

html
<div class='back-to-top' onclick='window.scrollTo({top: 0})'>
  <svg viewBox="0 0 20 20"><polyline points="4 13 10 7 16 13"></polyline></svg>
</div>

Untuk kode CSS, sama saja seperti yang sebelumya. Dan untuk cara ini kamu tidak perlu Javascript tambahan. Karena sudah dimasukkan di dalam tag <div> dengan class='back-to-top'. Kodenya bisa kamu lihat di sana.

Agar ada sedikit animasi atau agar terlihat sedikit smooth saat tombol back to top ditekan dan kita dipindahkan ke halaman atas. Kita bisa menambahkan property scroll-behavior: smooth; pada tag <html>. Jadinya akan seperti ini:

html
html {
  scroll-behavior: smooth;
}
Demo

Penutupan

Agar tidak memperlambat kecepatan website kamu, saya sarankan kamu untuk menggunakan tombol tanpa animasi. Karena kodenya tidak banyak, cuman tag <div> saja. Tapi, jika kamu ingin menambahkan animasi, yaa, silahkan sih.

Baiklah, mungkin itu saja untuk tutorial kali ini. Mudah-mudahan tutorial cara membuat tombol back to top ini bermanfaat bagi kamu. Akhir kata, terimakasih sudah berkunjung.

Related articles

Comments

  • Krisna Dwi Andrianto

    This comment has been removed by the author.

  • Krisna Dwi Andrianto

    Terima kasih ya gan, codenya sangat membantu 😀🙏