Cara Memasang Back To Top Dengan Gampang Tanpa Edit Template

Cara Memasang Back to Top dengan Praktis 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 bab kanan bawah ketika halaman blog discroll ke bawah.

Pengguna tinggal klik atau tap tombol Back to Top, maka halaman akan kembali bab 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 arahan 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="Cara Memasang Back to Top dengan Praktis Tanpa Edit Template">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>