Cara Memasang Back to Top dengan Mudah Tanpa Edit Template

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
 

Thanks for reading Cara Memasang Back to Top dengan Mudah Tanpa Edit Template | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

1 komentar:

Tulis komentar
Thursday, November 09, 2017 delete

wah, langsung bekerja kodenya, makasih, mbak.

Reply
avatar

No Spam, Please!