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. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

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

No Spam, Please!

Contact Form

Name

Email *

Message *