How to Add a “Back to Top” Button in Webflow
Learn how to add a “Back to top” button in Webflow that appears as you scroll, using a lightweight JavaScript script.
In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a “Back to top” button that appears on scroll in Webflow.
Example
Scroll through the area to see the button appear
The reading progress bar is a visual indicator that shows the user how far they are in an article.
To implement it in Webflow, you need a fixed Div at the top of the page and a JavaScript script that listens for the scroll event.
The math is simple: divide the current scroll position by the document’s total scrollable height.
This component is especially useful on long blog posts or documentation articles.
Combine it with an anchor system so users can jump straight to sections.
The button appears after 80px of scrolling in this demo and smoothly scrolls back to the top on click.
| Property | Recommended value |
|---|---|
| Position | Fixed |
| Bottom | 24px |
| Right | 24px |
| Default display | None (hidden) |
| Z-index | 999 |
1. Create the button in Webflow
Add a Link Block or Div element to your page. Give it the back-to-top class. Set its position to Fixed, bottom: 24px, right: 24px. Set it to display: none by default. Add an arrow icon or whatever text you want inside it.
2. Add the link to the top of the page
If you’re using a Link Block, set the link to # or to the ID of your hero section.
3. Add this script in the <body>
const btn = document.querySelector('.back-to-top');
window.addEventListener('scroll', function() {
btn.style.display = window.scrollY > 300 ? 'flex' : 'none';
});
btn.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});4. Publish and test
The button appears after 300px of scrolling and smoothly scrolls back to the top on click. Adjust the 300 value based on how long your pages are.
Conclusion
A back to top button improves the experience on long pages. Use cases:
- Blog pages with long articles
- Landing pages with lots of sections
- FAQ pages with many entries
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
