Webflow sync, pageviews & more.
NEW

How can I ensure my Webflow website refreshes when users click the back button, while also keeping the scroll position intact?

TL;DR
  • Remove custom JavaScript that forces full reloads or overrides navigation to preserve native scroll behavior.
  • Use Webflow’s default link elements and add a script to set history.scrollRestoration = 'auto' to enable automatic scroll restoration when navigating back.

You want your Webflow site to refresh when users navigate back using the browser’s back button, but you also want to retain scrolling position. By default, browsers cache session history and try to preserve scroll position, but Webflow behaves more like a Single Page Application (SPA), which can interfere with that behavior if you're using custom page transitions or script-based navigation.

1. Avoid Full Page Reloads via JavaScript

  • If you've added custom code to reload pages (location.reload()), remove it. This forces a hard reload and resets the scroll position.
  • Avoid intercepting history navigation events unless necessary; manual overrides can interfere with native scroll restoration.

2. Leverage Webflow's Built-In Navigation

  • Webflow's native link blocks (Link, Navbar, Collection List links, etc.) use normal anchor-based navigation, which works with browser history and scroll restoration by default.
  • Do not override navigation with JavaScript (e.g., smooth page transitions, custom SPA behaviors) unless you implement full scroll restoration manually.

3. Enable Scroll Restoration in the Browser

  • By default, browsers try to restore scroll when using the back button unless prevented by JavaScript.
  • To make sure this behavior remains, avoid using scripts that alter scroll on page load (e.g., window.scrollTo(0, 0) or scroll-behavior: smooth on body elements).

4. Use the window.history.scrollRestoration API

  • Insert this small snippet in Custom Code → Footer Code or in Page Settings → Footer:

    ```js

    ```

  • This tells the browser to handle scroll position automatically, especially when navigating with back/forward buttons.

5. Avoid Custom Transitions That Break Navigation

  • Libraries like Barba.js or Swup.js create SPA-like transitions but interrupt the default scroll restoration behavior.
  • If you're using such libraries, scroll restoration must be re-implemented manually using session storage or saved scroll positions.

Summary

To allow users to return to a refreshed page while keeping the scroll position, avoid forcing reloads and custom page transitions. Use Webflow’s default navigation and enable browser-native scroll restoration with a small script to ensure consistent behavior.

Rate this answer

Other Webflow Questions