Why does my Collection List Pagination in Webflow refresh to the top of the page?

Collection List Pagination in Webflow refreshes to the top of the page because it's a full page reload, not an AJAX-based update.

1. Why Pagination Scrolls to the Top

• Webflow pagination re-renders the entire page when a user clicks to the next or previous page of a Collection List.
• This is standard behavior for a full-page load, where the browser defaults to scrolling to the top of the new content.

2. Webflow’s Limitations

• Native Webflow Collection List Pagination does not support AJAX pagination (i.e., updating just the Collection section without reloading the page).
• There is no built-in way to maintain scroll position after pagination using Webflow’s default features.

3. Workarounds

• Custom JavaScript: You can implement scroll restoration logic using custom scripts (e.g., listening to pagination clicks and storing scroll position in session storage), but this requires manual coding and falls outside of native Webflow capabilities.
• Load More Instead of Pagination:
• Use Webflow’s “Load More” method instead of pagination if your goal is to keep users on the same spot.
• This is possible with some third-party integrations like Finsweet’s CMS Load (https://finsweet.com/cms/load).
• Manual Anchor Tags:
• Append an anchor (e.g., #collection-list) to the pagination links and place an ID above your Collection List.
• This can cause the browser to scroll to the anchor upon reload but may not be smooth or reliable across all browsers.

4. Upcoming or Alternative Solutions

• If you need AJAX functionality, you currently need to go beyond Webflow’s native feature set via:
• Custom code
• Third-party plugins like Finsweet Attributes

Summary

Webflow’s native Collection List Pagination triggers a full-page reload, causing the page to scroll to the top. To prevent this, consider using “Load More” with third-party tools like Finsweet CMS Load, or implement custom JavaScript to preserve scroll position.