Back to Top Button
Home
Snippets
Back to Top Button
HTML
CSS
JS
<h1>Scroll Down</h1> <p style="height:2000px;">This page is long. Scroll down to see the button.</p> <button id="topBtn">⬆</button>
body { font-family: Arial, sans-serif; line-height:1.6; padding:20px; } #topBtn { position: fixed; bottom: 30px; right: 30px; background: #007bff; color: #fff; border: none; padding: 12px 18px; border-radius: 50%; font-size: 18px; cursor: pointer; display: none; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
const btn = document.getElementById("topBtn"); window.onscroll = () => { btn.style.display = window.scrollY > 300 ? "block" : "none"; }; btn.onclick = () => window.scrollTo({top:0, behavior:"smooth"});
Ad #1
Ad #2
Scroll to Top