Webflow Pagination Hack: Seamless Pagination for CMS Lists, No Jump

UPDATED AGAIN (18.02.2022): While the below method still works just fine, you can also go ahead and use the Finsweet Attribute Method. Very simple, one line of code in the head of the page or project and then you just need to add a few attributes to the elements you want to paginate. We like this because it's simple and fast (in terms of pagination load times). As a small Webflow studio the Webflow experts at Finsweet have bestowed a gift on us. You'll find the instructions in Finsweet's List Load docs. Add the first set of required attributes, we recommend also adding the Speed Boost option (it lives on the pagination element as Show Page Count these days) and then simply scroll down to the pagination option and add those attributes. In terms of a quick implementation the below method is probably faster, but we'll leave it up to you to decide.

UPDATED FOR MULTIPLE COLLECTION LIST PAGINATION: This one's gonna be super quick and easy, so let's give your Webflow collection seamless pagination.

FYI, in case you don't know what seamless pagination is: basically, when you use collections lists in Webflow right now, the user would click next and the page reloads and the user ends up at the top of the page, not so nice when your blog post collection or whatever is sitting halfway down the page. With this hack when the user goes to the next 'page' he doesn't jump to the top but stays right where he was. Nice right, and quite simple.

Step 1: Add a teensy bit of code to your page

Open up the Page Settings, scroll to Custom Code and paste the bit below into the Before the </body> tag section:

Seamless Pagination Embed Code

If you’d like to keep your custom code a bit more neat, just paste our script tag in:

<script async src="https://cdn.jsdelivr.net/gh/J8kesVanEeden/milk-moon-studio_webflow-projects@main/seemless-pagination.js"></script>

If the embeds above don't load for you, the code lives in our CodePen pens: the single collection list version, the script tag version and the multiple collection lists version.

Now, in the Designer, if you pasted the code inline, click on the Collection List, switch to the Collections List Settings Panel on the right and paste "seamless-replace" into ID. If you used the script tag, skip that and use the numbered IDs from the next paragraph instead.

If you went with the script tag instead, one thing to watch: it only looks for numbered IDs. So instead of "seamless-replace", give the Collection List the ID seamless-replace1 and give the pagination element inside its Collection List Wrapper the ID w-pagination-wrapper1. It handles up to three collection lists on a page (seamless-replace2 and w-pagination-wrapper2 for the second, seamless-replace3 and w-pagination-wrapper3 for the third), and more than three needs the script extended.

Publish and you now have seamless pagination.

Wrapper ID

Have any questions, let us know in the comments and remember to check out the How-To section of our blog for more tutorials.

UPDATE

So we've had some questions of what to do when you run into a situation where there's more than one collection list that needs to paginate. So here's some code so you can see what to do if you for example have 3 collection lists that need to paginate and they're in different sections on the same page.

The code:

The IDs

Now stick in the IDs in order of appearance for the containers of the collection list: seamless-replace1, seamless-replace2, seamless-replace3
Then stick in the IDs in order of appearance for the Pagination ID inside the Collection List Wrapper with w-pagination-wrapper1, w-pagination-wrapper2, w-pagination-wrapper3

And you're done, publish and you can paginate multiple collection lists on the same page.

Webflow pagination questions

Why does Webflow pagination jump back to the top of the page?

Because Webflow's native pagination loads the next page as a full page reload, so the browser starts again at the top. If your collection list sits halfway down the page, that is a rubbish experience. The seamless pagination script above fetches the next page in the background and swaps only the collection list, so the visitor stays right where they were.

Can I paginate more than one collection list on the same page?

Yes. Use the multiple collection lists code in the UPDATE section, give each list its own ID (seamless-replace1, seamless-replace2, seamless-replace3) and give each pagination wrapper its matching ID (w-pagination-wrapper1, w-pagination-wrapper2, w-pagination-wrapper3).

Is there another way to paginate a Webflow collection list without a page reload?

Yes, the Finsweet List Load attribute. Its pagination mode shows the content on the same page, and you can add a scroll anchor so the visitor lands at the top of the list. The setup is covered at the top of this post.

Why isn't my seamless pagination working?

Check that the IDs are spelled exactly as above (if you use the script tag version, that means the numbered IDs, seamless-replace1 and w-pagination-wrapper1, and it stops at three lists), that the script sits in the Before </body> tag section of the page, and that you published the site, because custom code doesn't run in the Designer. If you use Webflow interactions on the list, they may need reinitialising after each page swap. In our experience the hosted script has a commented-out line near the bottom for exactly that, so if you pasted the code inline, look for it and uncomment it. The script tag version is a hosted file you can't edit, so to turn that line on you would need to copy the code inline instead.

If you like CMS tricks like this one, we've also written about adding text spans in dynamic CMS text, breaking the CMS grid with a flexbox pattern, making a blog summary without a summary field and building a CMS-powered ticker tape.