Animated Button Back To Top With Javascript

Tidak seperti opsi berbasis jQuery lainnya, tombol ini dikembangkan menggunakan Javascript. Dengan versi lebih ringan dan dapat disesuaikan.

---

Tutorial Blog: Cara Membuat Tombol Kembali ke atas dengan Javascript

Masuk blogger: Theme > Customise Edit HTML > Adjust widths / Advanced > Add CSS, tambahkan kode berikut ini pada kolom Add custom CSS.

/*!
=> Plugin: scrollToTop
*/.scrollToTop {
  outline: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.scrollToTop svg {
  display: block;
}

.scrollToTop {
  position: fixed;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;
  transition: visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;
  transition: transform .3s, visibility .3s, opacity .3s, background .3s;
  transition: transform .3s, visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;
  -webkit-transform: translateY(-2em);
  transform: translateY(-2em);
}

.scrollToTop.visible {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
/*
=> Personalize
*/
/* Icon
--------------------------------------------*/
.scrollToTop svg {
  fill: #FFFFFF;
}
/* Button
--------------------------------------------*/
.scrollToTop {
  background-color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 1px 7px rgba(0,0,0,0.25);
  bottom: 1em;
  right: 1em;
  padding: .5em;
  border-radius: 4px;
}

.scrollToTop:hover {
  background-color: rgba(0, 0, 0, 0.95);
}

Apply to Blog

Kembali ke menu Theme > Edit HTML, tambahkan kode berikut ini sebelum kode </body>

<!-- HTML-->
<button id="scrollToTop" class="scrollToTop">
   <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
   </svg>
</button>

<!-- Javascript -->
<script>//<![CDATA[
// Plugin: scrollToTop
var scrollToTop = (function() {
    var showButton = 600,
        scrollSpeed = 1000;
    function scrollTop(b) {
        function a(d) {
            c += Math.PI / (b / (d - e));
            c >= Math.PI && window.scrollTo(0, 0);
            0 !== window.scrollY && (window.scrollTo(0, Math.round(scrollTime + scrollTime * Math.cos(c))), e = d, window.requestAnimationFrame(a))
        }
        var scrollTime = window.scrollY / 2,
            c = 0,
            e = performance.now();
        window.requestAnimationFrame(a)
    }
    var scrollPosition = window.scrollY,
        scrollButton = document.getElementById("scrollToTop");
    window.addEventListener("scroll", function() {
        scrollPosition = window.scrollY;
        showButton < scrollPosition ? scrollButton.classList.add("visible") : scrollButton.classList.remove("visible")
    });
    scrollButton.onclick = function() {
        scrollTop(scrollSpeed)
    }
})();
//]]></script>

Save theme


showButton 600 Scroll sebelum menampilkan tombol

scrollSpeed 1000 Kecepatan kembali ke atas (1000 = 1 detik)

---

Untuk hasilnya ada di sini (lihat kanan bawah).