February 15, 2019

Tombol Kembali ke Atas Murni CSS - Scroll Back To Top Button Tanpa JavaScript

February 15, 2019

Tombol Kembali ke Atas merupakan faktor seo tak langsung. Keberadaan Back To Top Button menjadikan blog jadi ramah pengguna (user friendly). Dari ramah pengguna itulah blog jadi seo.

Tombol Kembali ke Atas

Berikut ini kode Tombol Kembali ke Atas Murni CSS (Scroll Back To Top Button) Tanpa JavaScript dan cara pasangnya. Tampilan begini:

Tombol Kembali ke Atas

Cara Pasang:

1. Tema > Edit HTML
2. Simpan di atas kode ]]></b:skin>

.scrolltop-wrap {
  box-sizing: border-box;
  position: absolute;
  top: 12rem;
  right: 2rem;
  bottom: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.scrolltop-wrap #scrolltop-bg {
  fill: #007bff;
}
.scrolltop-wrap #scrolltop-arrow {
  fill: white;
}
.scrolltop-wrap a:hover #scrolltop-bg {
  fill: #2990ff;
}
.scrolltop-wrap a:hover #scrolltop-arrow {
  fill: white;
}
@supports (-moz-appearance: meterbar) {
  .scrolltop-wrap {
    clip: rect(0, 3rem, auto, 0);
  }
}
.scrolltop-wrap a {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
  top: -5rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: -5rem;
  -webkit-transform: translateY(100vh);
          transform: translateY(100vh);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: inline-block;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: all;
  outline: none;
  overflow: hidden;
}
.scrolltop-wrap a svg {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.scrolltop-wrap a svg path {
  transition: all 0.1s;
}
.scrolltop-wrap a #scrolltop-arrow {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media print {
  .scrolltop-wrap {
    display: none !important;
  }
}

3. Simpan di atas kode </body>

<div class="scrolltop-wrap">
    <a href="#" role="button" aria-label="Scroll to top">
        <svg viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
          <path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
            <path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
        </svg>
    </a>
  </div>

Tombol Kembali ke Atas dengan JavaScript

Kalo yang ini BtT menggunakan Javascript, tapi ringan kok!

1. Simpan kode berikut ini di atas kode ]]></b:skin>

#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;
}

2. Simpan di atas </body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

Sumber
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
https://codepen.io/rolandtoth/pen/eMamVK

See the Pen
Pure CSS Scroll To Top
by rolandtoth (@rolandtoth)
on CodePen.

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Tombol Kembali ke Atas Murni CSS - Scroll Back To Top Button Tanpa JavaScript

Post a Comment

Contact Form

Name

Email *

Message *