Tombol Kembali ke Atas (Back to Top Button/Scroll to Top Button) adalah elemen penting website (blog) yang menjadi salah satu trend desain web.
Fungsinya memudahkan pembaca kembali ke bagian paling atas halaman web yang sedang dibuka.
Dengan satu klik atau tap saja, halaman blog akan kembali ke bagian paling atas, tanpa harus scroll mouse atau usap-usap layar.
Cara Membuat Tombol Kembali ke Atas - Back to Top Button di Blogger
Berikut ini Cara Membuat Tombol Kembali ke Atas - Back to Top Button di Blogger seperti dipasang di blog ini.1. Tema > Edit HTML
2. Copas 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;
}
3. Copas kode berikut ini di atas kode </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>
4. Save! Simpan template.
Mudah 'kan Cara Membuat Tombol Kembali ke Atas - Back to Top Button di Blogger? Good Luck and Happy Blogging! (news.contohblog.com).*
Sumber
