Cara Membuat Button “Kembali Ke Atas”

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara membuat tombol “kembali ke atas”” dengan menggunakan CSS dan Javascript. Scroll back to top button atau tombol “kembali ke atas” ini biasanya digunakan ketika website memiliki panjang teks melebihi panjang layar untuk kembali ke atas

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>
<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Kembali ke atas</button>

<div style="background-color:black;color:white;padding:30px">Scroll ke bawah</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">Contoh ini akan menunjukkan cara membuat tombol "scroll to top" yang terlihat
   <strong> saat pengguna mulai menggulir halaman</strong>.</div>

<script>
//dapatkan buttonnya
var mybutton = document.getElementById("myBtn");

// Saat pengguna mengscroll ke bawah 20px dari bagian atas dokumen, maka tunjukkan tombolnya
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// Saat pengguna mengklik tombol, scroll ke bagian atas dokumen
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>

Cara Membuat Scroll To Top Button

Langkah 1) Tambahkan HTML:
Buat tombol yang akan membawa pengguna ke bagian atas halaman saat diklik:
Contoh

<button onclick="topFunction()" id="myBtn" title="Go to top">Kembali Ke Atas</button>

Langkah 2) Tambahkan CSS:
Style tombol:
Contoh

#myBtn {
  display: none; /* Disembunyikan secara default */
  position: fixed; /* Posisi Fixed/sticky position */
  bottom: 20px; /* Tempatkan button di bagian bawah halaman */
  right: 30px; /* Tempatkan button 30px dari kanan */
  z-index: 99; /* Pastikan tidak tumpang tindih */
  border: none; /* Hapus borders */
  outline: none; /* Hapus outline */
  background-color: red; /* Atur warna background  */
  color: white; /* Warna teks */
  cursor: pointer; /* Tambahkan penunjuk mouse saat mengarahkan kursor */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Sudut membulat */
  font-size: 18px; /* Tingkatkan ukuran font */
}

#myBtn:hover {
  background-color: #555; /* Tambahkan background abu-abu tua saat mengarahkan kursor */
}

Langkah 3) Tambahkan JavaScript:
Contoh

//DApatkan buttonnya:
mybutton = document.getElementById("myBtn");

// Saat pengguna melakukan scrolling ke bawah 20px dari bagian atas dokumen, maka tunjukkan tombolnya
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// Saat pengguna mengklik tombol, scroll kembali ke bagian atas dokumen
function topFunction() {
  document.body.scrollTop = 0; // Untuk Safari
  document.documentElement.scrollTop = 0; // Untuk Chrome, Firefox, IE dan Opera
}