How to Add a “Back to Top” Button in Webflow

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

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