20 Contoh Kode Tombol Back To Top Siap Pakai di Blog
Tombol Back To Top adalah elemen penting pada website modern. Tombol ini memudahkan pengunjung kembali ke bagian atas halaman hanya dengan satu klik tanpa harus scroll manual.
Fitur ini sangat berguna untuk blog dengan artikel panjang, landing page, halaman tools, maupun toko online.
Di artikel ini saya coba share 20 kode html contoh timbol back to top yang bisa langsung anda tempel di website/blog secara gratis. BACA: Panduan Lengkap Cara Memasang Kode Script di Blogger, WordPress, dan Hosting untuk Pemula.
Semua contoh di bawah ini siap pakai. Tinggal copy lalu pasang di Blogger, WordPress, atau website hosting sendiri.
1. Tombol Back To Top Sederhana
<button id="btn1" style="position:fixed;bottom:20px;right:20px;padding:12px 16px;">↑</button>
<script>
document.getElementById("btn1").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
2. Tombol Bulat Modern
<button id="btn2" style="position:fixed;bottom:20px;right:20px;width:55px;height:55px;border-radius:50%;background:#4CAF50;color:#fff;border:none;">↑</button>
<script>
document.getElementById("btn2").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
3. Tombol Neon Glow
<button id="btn3" style="background:#00e676;color:#000;box-shadow:0 0 20px #00e676;">↑</button>
<script>
document.getElementById("btn3").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
4. Tombol Minimalis Hitam
<button id="btn4" style="background:#111;color:#fff;padding:14px;border:none;">↑</button>
<script>
document.getElementById("btn4").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
5. Tombol Transparan Blur
<button id="btn5" style="background:rgba(255,255,255,.2);backdrop-filter:blur(10px);">↑</button>
<script>
document.getElementById("btn5").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
6. Tombol Ikon SVG
<button id="btn6">⬆</button>
<script>
document.getElementById("btn6").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
7. Tombol Gradient
<button id="btn7" style="background:linear-gradient(45deg,#36d1dc,#5b86e5);">↑</button>
<script>
document.getElementById("btn7").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
8. Tombol Slide In
<button id="btn8">↑</button>
<script>
document.getElementById("btn8").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
9. Tombol Dengan Teks
<button id="btn9">Back To Top</button>
<script>
document.getElementById("btn9").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
10. Tombol Kapsul
<button id="btn10" style="border-radius:50px;">↑ Top</button>
<script>
document.getElementById("btn10").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
11. Tombol Shadow Floating
<button id="btn11" style="box-shadow:0 8px 20px rgba(0,0,0,.3)">↑</button>
<script>
document.getElementById("btn11").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
12. Tombol Merah Alert
<button id="btn12" style="background:red;color:#fff;">↑</button>
<script>
document.getElementById("btn12").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
13. Tombol Biru Blogger
<button id="btn13" style="background:#2196F3;color:#fff;">↑</button>
<script>
document.getElementById("btn13").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
14. Auto Muncul Saat Scroll
<button id="btn14">↑</button>
<script>
const btn14=document.getElementById("btn14");
window.onscroll=function(){
btn14.style.display=window.scrollY>300?"block":"none";
}
btn14.onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
15. Bounce Animation
<button id="btn15" style="animation:bounce 1s infinite">↑</button>
<script>
document.getElementById("btn15").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
16. Elegan Kanan Bawah
<button id="btn16" style="position:fixed;bottom:30px;right:30px">↑</button>
<script>
document.getElementById("btn16").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
17. Kiri Bawah
<button id="btn17" style="position:fixed;bottom:20px;left:20px">↑</button>
<script>
document.getElementById("btn17").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
18. Hover Scale
<button id="btn18" style="transition:.3s">↑</button>
<style>
#btn18:hover{
transform:scale(1.2)
}
</style>
<script>
document.getElementById("btn18").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
19. Modern Glass
<button id="btn19" style="backdrop-filter:blur(12px);border-radius:50%">↑</button>
<script>
document.getElementById("btn19").onclick=function(){
window.scrollTo({top:0,behavior:'smooth'})
}
</script>
20. Script Back To Top Premium Lengkap
<button id="backTop">↑</button>
<style>
#backTop{
position:fixed;
bottom:20px;
right:20px;
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#4CAF50;
color:#fff;
font-size:22px;
cursor:pointer;
display:none;
box-shadow:0 8px 20px rgba(0,0,0,.25);
transition:.3s
}
#backTop:hover{
transform:scale(1.1)
}
</style>
<script>
const backTop=document.getElementById("backTop");
window.onscroll=function(){
backTop.style.display=window.scrollY>300?"block":"none";
};
backTop.onclick=function(){
window.scrollTo({
top:0,
behavior:"smooth"
});
};
</script>
Peringatan!
Pastikan Anda membaca & mengikuti panduan sebelum memasang script ini. Kesalahan penerapan kode dapat menyebabkan script tidak berfungsi.