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

When using Collection List Pagination in Webflow, clicking “Next” or “Previous” often causes the page to refresh to the top. This happens because Webflow reloads the entire page instead of dynamically loading the next set of collection items. Here’s how to improve user experience.

1. Use AJAX Pagination (Webflow’s Native Feature)

• Enable AJAX pagination to avoid full-page reloads.
• Go to Collection List Settings (cog icon) > Check "Enable Pagination".
• Ensure "Disable Ajax Loading" is unchecked so Webflow loads the next set of items without refreshing the page.

2. Use Custom JavaScript for Smooth Scroll

If AJAX pagination doesn't work as expected, add custom JavaScript to scroll back to the Collection List’s position after pagination.

• Go to Page Settings > Add Custom Code (Before tag).
• Insert the following script:
• `document.addEventListener("DOMContentLoaded", function() {
  let paginationLinks = document.querySelectorAll(".w-pagination-next, .w-pagination-previous");
  paginationLinks.forEach(link => {
  link.addEventListener("click", function(e) {
  sessionStorage.setItem("scrollPos", window.scrollY);
  });
  });
  if (sessionStorage.getItem("scrollPos")) {
  window.scrollTo(0, sessionStorage.getItem("scrollPos"));
  sessionStorage.removeItem("scrollPos");
  }
  });`
• This script stores the user’s scroll position when they click the pagination link and restores it after the page reloads.

3. Use Third-Party Solutions (Jetboost)

For a no-code approach, Jetboost provides dynamic, AJAX-powered pagination without needing custom scripts.

• Sign up for Jetboost and install their pagination booster.
• Follow Jetboost’s setup guide to connect it with your Webflow Collection List.
• This eliminates the page refresh entirely and provides a smoother user experience.

Summary

Webflow's default pagination reloads the page, causing it to jump to the top. Enable AJAX pagination, use JavaScript to retain scroll position, or leverage a third-party tool like Jetboost for real-time loading.