Design

5 views

4 min

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.

good to know

For a smoother entrance animation, replace display: none/flex with a CSS opacity transition. Add this to your styles: .back-to-top { opacity: 0; transition: opacity 0.3s; pointer-events: none; } .back-to-top.visible { opacity: 1; pointer-events: auto; } and update the script to toggle the visible class.

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.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss