Membuat tombol "back to top" kembali ke atas halaman dengan cepat

Program berikut adalah program JavaScript yang memiliki dua fungsi utama. Pertama, ketika pengguna menggulir halaman ke bawah sebesar 220 piksel atau lebih, sebuah tombol "back to top" akan muncul di sudut kanan bawah layar. Tombol ini bertujuan untuk memudahkan pengguna dalam kembali ke atas halaman dengan cepat. Kedua, ketika tombol tersebut diklik, maka halaman akan kembali ke posisi atas.

Cara kerja program "back to top"

Cara kerja program ini adalah sebagai berikut:

Program memeriksa posisi halaman saat ini dengan menggunakan fungsi window.onscroll(). Saat pengguna menggulir halaman, fungsi ini akan terpanggil dan memeriksa posisi halaman saat ini.

Jika posisi halaman lebih dari 220 piksel dari atas, maka program akan menampilkan tombol "back to top" dengan menggunakan fungsi document.getElementById().style.display = "block".

Jika posisi halaman kurang dari atau sama dengan 220 piksel dari atas, maka program akan menyembunyikan tombol "back to top" dengan menggunakan fungsi document.getElementById().style.display = "none".

Ketika tombol "back to top" diklik, maka program akan menjalankan fungsi topFunction().

Fungsi topFunction() akan mengubah posisi halaman menjadi 0, sehingga halaman akan kembali ke posisi atas.

Kode yang digunakan untuk membuat Tombol "back to top"

Kode HTML, CSS, dan Javascript yang digunakan adalah sebagai berikut:

Dimulai dengan membuat tombol yang nantinya akan muncul saat di scroll kebawah, seperti berikut ini:

HTML :

  
<div id="myBtn" onclick="topFunction()">⇑</div>

Anda bisa menambahkan css berikut ini untuk mengatur tampilannya. Untuk yang dishare di sini, ditambahkan keterangan yang menunjukkan fungsinya, agar bisa digunakan sebagai pelajaran, bagi yang membutuhkan.

CSS :

  
<style>
#myBtn {
  display: none; /* tombol akan dihide pada awalnya */
  position: fixed; /* posisi tetap pada layar */
  bottom: 20px; /* jarak dari bawah */
  right: 30px; /* jarak dari kanan */
  z-index: 99; /* posisi di atas elemen lain */
  font-size: 28px; /* ukuran font */
  border: none; /* tidak ada border */
  outline: none; /* tidak ada outline */
  background-color: #555; /* warna background */
  color: white; /* warna tulisan */
  cursor: pointer; /* pointer ketika dihover */
  padding: 15px; /* padding */
  border-radius: 50%; /* border radius */
}

#myBtn:hover {
  background-color: #333; /* warna background ketika dihover */
}
html{scroll-behavior:smooth} /* efek pergerakan yang smooth */
</style>
  

Dan inilah javascript yang diterapkan untuk menjalankan program ini.

Javascript :

  
<script>
// saat user scroll ke bawah 20px dari atas halaman, tombol akan muncul
window.onscroll = function() {scrollFunction()};

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

// saat tombol back to top di klik, halaman akan kembali ke atas
function topFunction() {
  document.body.scrollTop = 0; /* untuk Safari */
  document.documentElement.scrollTop = 0; /* untuk Chrome, Firefox, IE, dan Opera */
}
</script>
  

⇑

Cara Membuat tombol "back to top" di Bloger

Anda dapat membuat tombol "back to top" di halaman blog Anda dengan cara sebagai berikut:

1. Masuk ke menu "Tema" dan pilih "Edit HTML".

2. Cari kode "" di dalam kode HTML halaman blog Anda.

3. Paste kode berikut di atas kode "":

Back to Top

4. Klik "Simpan" untuk menyimpan perubahan.

Dengan demikian, tombol "back to top" akan muncul di halaman blog Anda dan dapat membantu pembaca untuk kembali ke bagian atas halaman dengan mudah.

Sebagai contoh di halaman ini, karena fungsi scrollTop telah digunakan untuk program yang lain yang lebih luas di blog, maka fungsi itu dinonaktifkan. Sebagai contoh, scrollTop yang aktif untuk menyembunyikan tombol "back to top" saat posisi di bagian atas halaman, dan akan muncul saat discroll ke bawah, bisa dibuka DISINI.

Silakan dimanfaatkan, dan jangan lupa meninggalkan komentar. Tanya-tanya juga boleh.