PANDUAN.ID – Kali ini membagikan tentang cara membuat tombol back to top atau kembali keatas di HTML dengan mudah.
Tombol back to top merupakan salah satu bagian penting dari setiap website, jika sebuah web tidak memiliki tombol tersebut sangat fatal sekali.
Dalam membuat tombol Back To Top menggunakan Javascript, CSS dan HTML. Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini.
Daftar Isi
Cara Membuat Tombol Back To Top di HTML
Berikut ini langkah-langkah membuat tombol back top top di HTML dengan mudah:
1. Tambahkan kode HTML
Tambahkan kode HTML ini tepat dibawah kode <body>
<button onclick=”topFunction()” id=”myBtn” title=”Go to top”>Top</button>
2. Tambahkan kode CSS
Tambahkan kode CSS tepat di bawah <head> atau diatas </head>
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
3. Tambahkan kode Javascript
Tambahkan kode Javascript dibawah kode <head>
//Get the button:
mybutton = document.getElementById(“myBtn”);// 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) {
mybutton.style.display = “block”;
} else {
mybutton.style.display = “none”;
}
}// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
Selesai silahkan simpan dan cek pasti tombol Back To Top sudah muncul di website Anda. Silahkan di edit kodenya sesuai keinginan Anda.
Bagaimana sangat mudahkan dalam membuat back to top dengan HTML? Kunjungi terus Panduan.id untuk tutorial koding lainnya.
Akhir Kata
Itulah cara membuat tombol back to top di HTML dengan mudah yang bisa Anda praktekan secara langsung. Semoga Bermanfaat.
sumber kode: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
