Toggle Menu
Toolbly
Home
Tools
Blog
About
Contact
Privacy
Terms
Toggle theme
Home
Web Tools
Scroll To Top Button Generator
Scroll-to-Top Button Generator
Generate customizable HTML, CSS, and JS for a scroll-to-top button.
Customize Button
Background Color
Icon Color
Size (px): 48
Show After (px): 300
↑
Live Preview
1. HTML
<button id="scrollToTopBtn" title="Go to top">↑</button>
2. CSS
#scrollToTopBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; border: none; outline: none; background-color: #007bff; color: #ffffff; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; font-size: 24px; line-height: 48px; text-align: center; transition: opacity 0.3s, visibility 0.3s; } #scrollToTopBtn:hover { opacity: 0.8; }
3. JavaScript
window.addEventListener('DOMContentLoaded', (event) => { const scrollToTopBtn = document.getElementById("scrollToTopBtn"); window.onscroll = function() { if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { scrollToTopBtn.style.display = "block"; } else { scrollToTopBtn.style.display = "none"; } }; scrollToTopBtn.addEventListener('click', function(){ window.scrollTo({top: 0, behavior: 'smooth'}); }); });
How do I use this generated code?
Can I customize the button's appearance?
What does the 'Show After (px)' value do?
How does the smooth scrolling work?