Home » Koding » Html » Cara Membuat Tombol Back To Top di HTML dengan Mudah
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
- 1. Tambahkan kode HTML
- 2. Tambahkan kode CSS
- 3. Tambahkan kode Javascript
- Akhir Kata
Berikut ini langkah-langkah membuat tombol back top top di HTML dengan mudah:
1. Tambahkan kode HTML
Tambahkan kode HTML ini tepat dibawah kode
Top
2. Tambahkan kode CSS
Tambahkan kode CSS tepat di bawah atau diatas
#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
//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: //www.w3schools.com/howto/howto_js_scroll_to_top.asp
Hola, saya Nawang sangat menyukai di dunia blogging, jadi saya akan membagikan tips trik terbaru seputar Blogger, Wordpress dan lainnya.
Di bawah ini kita akan mempelajari cara membuat tombol “kembali ke atas”” dengan menggunakan CSS dan Javascript. Scroll back to top button atau tombol “kembali ke atas” ini biasanya digunakan ketika website memiliki panjang teks melebihi panjang layar untuk kembali ke atas
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#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;
}
Kembali ke atas
Scroll ke bawah
Contoh ini akan menunjukkan cara membuat tombol "scroll to top" yang terlihat
saat pengguna mulai menggulir halaman.
//dapatkan buttonnya
var mybutton = document.getElementById["myBtn"];
// Saat pengguna mengscroll ke bawah 20px dari bagian atas dokumen, maka tunjukkan tombolnya
window.onscroll = function[] {scrollFunction[]};
function scrollFunction[] {
if [document.body.scrollTop > 20 || document.documentElement.scrollTop > 20] {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// Saat pengguna mengklik tombol, scroll ke bagian atas dokumen
function topFunction[] {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Cara Membuat Scroll To Top Button
Langkah 1] Tambahkan HTML:
Buat tombol yang akan membawa pengguna ke bagian atas halaman saat diklik:
Contoh
Kembali Ke Atas
Langkah 2] Tambahkan CSS:
Style tombol:
Contoh
#myBtn {
display: none; /* Disembunyikan secara default */
position: fixed; /* Posisi Fixed/sticky position */
bottom: 20px; /* Tempatkan button di bagian bawah halaman */
right: 30px; /* Tempatkan button 30px dari kanan */
z-index: 99; /* Pastikan tidak tumpang tindih */
border: none; /* Hapus borders */
outline: none; /* Hapus outline */
background-color: red; /* Atur warna background */
color: white; /* Warna teks */
cursor: pointer; /* Tambahkan penunjuk mouse saat mengarahkan kursor */
padding: 15px; /* Some padding */
border-radius: 10px; /* Sudut membulat */
font-size: 18px; /* Tingkatkan ukuran font */
}
#myBtn:hover {
background-color: #555; /* Tambahkan background abu-abu tua saat mengarahkan kursor */
}Langkah 3] Tambahkan JavaScript:
Contoh
//DApatkan buttonnya:
mybutton = document.getElementById["myBtn"];
// Saat pengguna melakukan scrolling ke bawah 20px dari bagian atas dokumen, maka tunjukkan tombolnya
window.onscroll = function[] {scrollFunction[]};
function scrollFunction[] {
if [document.body.scrollTop > 20 || document.documentElement.scrollTop > 20] {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// Saat pengguna mengklik tombol, scroll kembali ke bagian atas dokumen
function topFunction[] {
document.body.scrollTop = 0; // Untuk Safari
document.documentElement.scrollTop = 0; // Untuk Chrome, Firefox, IE dan Opera
}