Script Tombol Back To Top - XWAPPER

Tombol Back To Top di Blog

Langkah-langkah Pemasangan

• Masuk ke Dashboard Blogger.
• Pilih menu Tata Letak (Layout).
• Klik Tambahkan Gadget (bebas di mana saja, tapi saran saya di bagian Footer atau Sidebar paling bawah).
• Pilih HTML/JavaScript.
• Masukkan semua kode gabungan kedalam slot widget.

Jadi tak perlu ribet harus meletakkan diatas penutup body. Silakan salin kode dibawah ini.

  <style>
#backToTop {
  display: none;
  position: fixed;
  bottom: 25px; /* Jarak dari bawah */
  right: 20px;  /* Jarak dari kanan */
  z-index: 999;
  border: none;
  outline: none;
  background-color: #ff0000; /* Warna tombol */
  color: white;
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.4);
  transition: 0.3s;
  padding: 0;
  line-height: 45px;
  text-align: center;
}

#backToTop:hover {
  background-color: #333;
}
</style>

<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" id="backToTop" title="Ke Atas">▲</button>

<script>
  window.onscroll = function() {
    var btn = document.getElementById("backToTop");
    // Tombol muncul setelah scroll ke bawah 300px
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
      btn.style.display = "block";
    } else {
      btn.style.display = "none";
    }
  };
</script>