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

You're looking to force content to refresh on browser back navigation in your Webflow site, while preserving the user's scroll position. This is a nuanced issue because default browser behavior typically restores the page from cache when the back button is used.

1. Understand Browser Back Behavior

• Modern browsers often use back-forward cache (bfcache) to load previous pages instantly without reloading.
• This preserves the scroll position, form inputs, and DOM without triggering a full page reload.
• However, this means any JavaScript or dynamic content might not refresh unless manually handled.

2. Trigger a Refresh Without Losing Scroll

To refresh specific content without a full page reload (and scroll reset), you can use JavaScript to detect the pageshow event and conditionally reload data.

• Add this small custom code to your Webflow project:

  Go to Project Settings → Custom Code → Footer and insert:

  ```javascript

  ```

• The event.persisted detects when the page was loaded from the bfcache.

• This forces the page to reload only if it was loaded via browser back/forward navigation.

3. Preserve Scroll Position on Reload

Reloading the page resets the scroll position, but you can manually restore it using sessionStorage.

• Add this to the footer as well:

  ```javascript

  ```

• This captures the scroll position before the user leaves the page and restores it on reload.

4. Embed Code in Webflow Properly

• Go to Webflow Designer → Page Settings for each template/page where needed.
• Paste the combined script into the Before tag section, or do it globally via Project Settings → Custom Code → Footer.
• Republish your site after saving changes.

Summary

To make your Webflow site refresh on back navigation while keeping scroll:

• Use the pageshow event with location.reload() to refresh if loaded from cache.
• Store and restore scroll position using sessionStorage.
• Insert these scripts into your site's Footer Custom Code and republish.

This approach balances forced freshness with a seamless UX.