Cara Memasang Back to Top dengan Mudah Tanpa Edit Template

Romeltea | Follow @romel_tea

Cara Memasang Back to Top dengan Mudah Tanpa Edit Template.
Cara Memasang Back to Top dengan Mudah Tanpa Edit Template.

BACK to Top Button atau Tombol Kembali ke Atas menjadi trending desain website, termasuk template blog.

Tombol atau widget Back to Top ini muncul di bagian kanan bawah saat halaman blog discroll ke bawah.

Pengguna tinggal klik atau tap tombol Back to Top, maka halaman akan kembali bagian atas.

Banyak sekali cara membuat, menampilkan, atau memasang Back to Top di blog. Salah satunya di bawah ini.

Demonya ada di blog ini.

Cara Memasang Back to Top

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul kosongkan
3. Copas kode berikut ini:

<style>
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<script>
// When the user scrolls down 30px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 30 || 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>

4. Beres!

Itu dia Cara Memasang Back to Top dengan Mudah Tanpa Edit Template.*

Sumber
 

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media dan Content Creator from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

2 comments on Cara Memasang Back to Top dengan Mudah Tanpa Edit Template

No Spam, Please!

Contact Form

Name

Email *

Message *