Using the jquery-pjax library, it is possible set up paginated collections in a way that browsing feels snappier. Demo: https://seamless-pagination.webflow.io/#demo
Quick version of how jquery-pjax works:
- Listen for clicks on links with a certain selector
- Instead of going to the link, load the html data in the background
- Replace the specified chunk of html
history.pushStateto update the URL, so that refreshing the page / sharing a url works as expected
In this demo, everything inside the
#seamless-replace div will be replaced with every previous/next navigation. It is possible to replace a smaller portion of the page, but with multiple paginated collections on the page we also needed to replace the other previous/next links.