Trang chủ
Scroll to Top Button
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<button class="js-scrollTopBtn">⬆️ Top</button>
CSS
Copy
.js-scrollTopBtn { position: fixed; bottom: 20px; right: 20px; padding: 8px 12px; font-size: 18px; display: block; /* mặc định ẩn */ cursor: pointer; border: none; border-radius: 4px; background: #2b2d31; color: #fff; z-index: 1000; transition: opacity 0.3s; } .js-scrollTopBtn.show { display: block; } body { height: 2000px; /* để có thể cuộn xuống */ }
JS
Copy
const scrollTopBtn = document.querySelector(".js-scrollTopBtn"); if (scrollTopBtn) { window.addEventListener("scroll", () => { if (window.scrollY > 300) { scrollTopBtn.classList.add("show"); } else { scrollTopBtn.classList.remove("show"); } }); scrollTopBtn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" }); }); }