Back to top button

Our most used Webflow hack - Seamless Pagination

Our most used Webflow hack - Seamless Pagination
Webflow introduced Pagination for Collections lists a long time ago, but the feature has never been perfected. We've created a quick post on the Webflow hack we probably use the most to give blogs and other collections list seamless pagination in our Webfow projects.

This one's gonna be super quick and easy, so let's give your Webflow collection seamless pagination.

FYI, 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 does't jump to the top but stays right where he was. Nice right, and quite simple.

Step 1 - Add teensy bit of code to your page

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

<!-- Start seamless-pagination custom code -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
 var containerSelector = '#seamless-replace';
 $(document).pjax(
   '.w-pagination-wrapper a',
   containerSelector,
   {
     container: containerSelector,
     fragment: containerSelector,
     scrollTo: false,
     timeout: 2500,
   }
 );
 // These 3 lines should reinitialize interactions
 $(document).on('pjax:end', function() {
   Webflow.require('ix2').init();
 });
</script>

<!-- End seamless-pagination custom code -->

Webflow Seamless Pagination Code Embed

Now, in the Designer, click on the Collection List, switch to the Collections List Settings Panel on the right and paste "seamless-replace" into ID.

Publish and you now have seemless pagination.

Webflow Seamless Pagination 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.

recent projects