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.

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, 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.

UPDATE

So we've had some questions of what to do when you run into a situation where's 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:

<!-- 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 containerSelector1 = '#seamless-replace1';      $(document).pjax(    '#w-pagination-wrapper1 a',    containerSelector1,    {      container: containerSelector1,       fragment: containerSelector1,      scrollTo: false,      timeout: 2500,    }  );      var containerSelector2 = '#seamless-replace2';      $(document).pjax(    '#w-pagination-wrapper2 a',    containerSelector2,    {      container: containerSelector2,       fragment: containerSelector2,      scrollTo: false,      timeout: 2500,    }  );      var containerSelector1 = '#seamless-replace3';    $(document).pjax(    '#w-pagination-wrapper3 a',    containerSelector1,    {      container: containerSelector1,       fragment: containerSelector1,      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 -->

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.

recent projects