Universal, lightweight, and fully customizable. The perfect back-to-top button for any website.
Scroll down to test
Optimized vanilla JavaScript with efficient scroll detection for maximum performance
Control position, animation, size, color, and behavior with simple configuration
Built with ARIA labels and keyboard navigation support
Works flawlessly on all devices and screen sizes
Optional circular progress ring shows scroll position
Drop-in solution for any website with minimal setup
<!-- Include the widget -->
<link rel="stylesheet" href="scroll-to-top.css">
<script src="scroll-to-top.js"></script>
<!-- Initialize with options -->
<script>
new ScrollToTop({
position: 'right',
animation: 'fade',
showProgress: true,
size: 'md',
color: 'primary',
threshold: 300
});
</script>User experience is paramount in modern web design. When visitors scroll through long pages, they need an easy way to return to the top without endless scrolling. This isn't just a convenience—it's an expectation.
Studies show that websites with smooth navigation features have significantly lower bounce rates and higher engagement metrics. Users spend more time on pages when they can easily navigate back to navigation menus or important calls-to-action at the top.
Our scroll-to-top widget is designed to be unobtrusive yet always available. It appears only when needed, doesn't interfere with your content, and provides immediate value to your users.
With configurable animations and position options, you can match the widget perfectly to your brand identity. The optional progress indicator adds a modern touch that helps users understand where they are on the page.
Built with performance in mind, this component uses efficient scroll detection. This means zero performance impact on your page, even on mobile devices.
Whether you're building a blog, e-commerce site, documentation, or any other content-heavy website, this universal widget integrates seamlessly and enhances the user experience immediately.