Free Scroll to Top Button Generator Tool
Create customizable scroll-to-top buttons with live preview and instant code generation. Choose from multiple shapes, sizes, positions, and icons. Everything happens in your browser—no server upload required.
Customize Your Button
Live Preview
Scroll to See the Button
Scroll down to see the button appear after 300px. The button will appear in the bottom right corner.
Section 1
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 2
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 3
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 4
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 5
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 6
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 7
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 8
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 9
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 10
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 11
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 12
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 13
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 14
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Section 15
This is sample content to create a scrollable area. Keep scrolling to test how the scroll-to-top button appears and behaves based on your configuration. Experience how the button smoothly appears and helps users navigate back to the top of long pages.
Generated Code
Copy and paste this code into your HTML file, just before the closing </body> tag.
1<!-- Scroll to Top Button -->
2<button id="scrollToTopBtn" style="
3 position: fixed;
4 bottom: 2rem; right: 2rem;
5 width: 48px; height: 48px;
6 border-radius: 50%;
7 background-color: #3B82F6;
8 color: #FFFFFF;
9 border: none;
10 cursor: pointer;
11 display: none;
12 align-items: center;
13 justify-content: center;
14 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
15 transition: all 0.3s ease;
16 z-index: 1000;
17" onmouseover="this.style.backgroundColor='#2563EB'; this.style.transform='scale(1.1)';" onmouseout="this.style.backgroundColor='#3B82F6'; this.style.transform='scale(1)';">
18 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
19</button>
20
21<script>
22// Scroll to Top functionality
23(function() {
24 const scrollBtn = document.getElementById('scrollToTopBtn');
25 const scrollOffset = 300;
26
27 // Show/hide button based on scroll position
28 window.addEventListener('scroll', function() {
29 if (window.pageYOffset > scrollOffset) {
30 scrollBtn.style.display = 'flex';
31 } else {
32 scrollBtn.style.display = 'none';
33 }
34 });
35
36 // Scroll to top when clicked
37 scrollBtn.addEventListener('click', function() {
38 window.scrollTo({ top: 0, behavior: 'smooth' });
39 });
40})();
41</script>How to Use
Customize Your Button
Use the controls above to customize your scroll-to-top button appearance and behavior.
Test in Live Preview
Scroll in the preview area to see how your button appears and behaves.
Copy the Code
Click the "Copy Code" button and paste the generated code into your project.
Enjoy!
Your scroll-to-top button is now ready to use. No additional dependencies required!
Live Preview
See your button in action with real scrolling
Ready-to-Use Code
Clean HTML/CSS/JS with no dependencies
Full Customization
Control every aspect of your button
Why Use This Scroll to Top Button Generator?
Improve User Experience
Help users navigate long pages effortlessly. A scroll-to-top button is essential for improving website usability and user satisfaction.
No Dependencies
Pure HTML, CSS, and vanilla JavaScript. No jQuery, no frameworks, no bloat. Just clean, efficient code that works everywhere.
Fully Customizable
Match your brand perfectly. Customize colors, shapes, sizes, positions, and icons to create a button that fits seamlessly into your design.
Production Ready
Copy and paste into any website. The generated code is optimized, tested, and ready for production use right away.
Customization Options
- Button Shape (Circle, Square, Rounded)
- Button Size (Small, Medium, Large)
- Position (4 corners)
- Icon Style (Arrow, Chevron, etc.)
- Background Color
- Icon Color
- Hover Color
- Scroll Offset
- Smooth Scroll Toggle