Membuat Tombol Back To Top Dengan HTML, CSS dan JavaScript - Razzer Hacker
Minggu, 27 September 2020
Tambah Komentar
Membuat Tombol Back To Top Dengan HTML, CSS dan JavaScript - Hai sobat pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Tombol Back To Top Dengan HTML, CSS dan JavaScript. Tanpa banyak basa basi kita langsung next ke tutorial nya ya sobat, simak langkah langkah dibawah ini!
Pertama kalian buka code editor kalian buat file baru dan di berinama index.html lalu copy kode dibawah ini dan pastekan di file index.html
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tombol Back To Top - Razzer Hacker</title>
</head>
<body>
<!-- Button untuk back ke atas -->
<button onclick="razzerTop()" id="razzer-top" title="Ke Atas">Back</button>
<!-- Perintah -->
<div class="text">
<p>Scroll kebawah nanti setelah anda scroll akan muncul button lalu apa bila anda klik button maka anda akan di bawa keatas</p>
</div>
</body>
</html>
Kedua sisipkan kode CSS di dalam tag </head>
<style type="text/css">
body {
height: 200vh;
font-family:Arial,sans-serif;
}
.text {
background: #1d1f21;
color: #fff;
height: 200vh;
padding: 10px 10px;
}
#razzer-top {
display: none;
position: fixed; /* Button berada di posisi terdiam */
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #f1c40f; /* Button background color */
color: #fff;
cursor: 0;
padding: 15px;
border-radius: 10px;
font-weight: bold;
}
#razzer-top:hover {
background-color: #2c3e50; /* Button ketika di klik berubah warna */
}
</style>
<script type="text/javascript">
// fungsi ketika user men scroll ke bawah 20 px maka tombol back to top akan muncul
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("razzer-top").style.display = "block";
} else {
document.getElementById("razzer-top").style.display = "none";
}
}
// fungsi ketika user meng klik tombol back to top maka halaman akan menscroll ke atas
function razzerTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
See the Pen Back To Top - Razzer Hacker by Muhammad (@RidwanGans) on CodePen.
Sekian tutorial Membuat Tombol Back To Top
Dengan HTML, CSS dan JavaScript - Razzer Hacker. Semoga bermanfaat buat teman-teman semua.
Belum ada Komentar untuk "Membuat Tombol Back To Top Dengan HTML, CSS dan JavaScript - Razzer Hacker"
Posting Komentar