A guide to infinite scroll in Webflow

Discover the simplest tutorial on infinite scroll and create a frictionless user experience in no time — with gift experts Best Buds.

No items found.

Harnessing the power of Webflow’s industry-leading Designer with its equally extensible CMS can produce stunning results. With infinite scroll, the days of visitors hopelessly grinding through pagination are over!

Disclaimer: Infinite scrolling creates accessibility and usability problems, so use your own judgement in using this. If you’d like to learn more about what Webflow is doing for accessibility, check out our blog post here.

Hello friends! Jack and Wiggy from Best Buds here. We’re two, real-life BFFs who used Webflow to build a home on the internet for the best gifts for best friends. Despite our complete and utter lack of engineering know-how, Webflow enabled us to build an incredibly robust, content-rich site that feels fun and unique.

When we first launched Best Buds, infinite scroll was our white whale. We’re a CMS-heavy site with a focus on bite-sized visual content. We needed a frictionless way for visitors to browse to their heart’s content.

Every time a visitor clicks a button to go to next page, we knew there was an increased risk of losing them — especially for mobile visitors trained on infinite scroll from social feeds like Instagram.

Infinite scroll on Best Buds' site.
It keeps going, and going, and …

After digging into Metafizzy’s excellent Infinite Scroll framework, we got our site up and scrolling in Webflow with just 17 lines of code! This tutorial couldn’t be simpler — for most Webflow sites, this is a one-step, copy-paste process.

Getting started with infinite scroll

No fooling: you can do it all in just two steps — and one is optional!

A couple notes:

  1. Since infinite scroll requires custom code, you’ll need a paid account plan to implement this on your site
  2. Because it relies on custom code, you’ll only be able to see your infinite scroll on your published site, not on the Designer
  3. You will need to activate pagination on your collection list to make this work

Step 1: Add custom JavaScript

Go to Project Settings > Custom Code, paste the following JavaScript into your Head Code, and Save Changes:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function($) {
       $('.collection-list').infiniteScroll({ // selector for the CMS collection list      
           path: '.w-pagination-next', // selector for the paged navigation      
           append: '.collection-item', // selector for all items you'll retrieve      
           animate: true,
           loadingText: "",
           maxPage: undefined,


Now, when you publish your site, you’ll have unlocked the power of infinite scroll. New CMS collection items will be dynamically loaded wherever you have a paginated collection list element. As visitors scroll and content loads, the URL will magically update, allowing them to reference and share content from a specific page.

Unless you used custom class names for your collection lists and items, that is …

If you did, here’s how to fix your decidedly finite scrolling.

Step 2 (optional): Replace references to class names

If you changed the auto-generated collection-list and collection-item class names on your site, replace the references to those class names in the JavaScript above (lines 10 and 12) with your custom names.

You’re done. That’s it. Seriously!

Final touches: cleaning up your page structure — and fixing the disappearing footer problem

Now — let’s make things shine. First by hiding our pagination element, then by making our vanishing footer visible again.

Collection list pagination settings

At this point you can hide the default pagination element that’s bundled with the rest of your collection list. Find the pagination element in the Navigator and change its display property to none.

Depending on the visual density of your site, you can scale back the number of CMS items that load on each page, and further optimize the speed to your visitor’s first meaningful page paint (or, in human: your page speed).

Pro tip: Use Pingdom's Website Speed Test for quick and easy site benchmarking.

We chose to drop Best Buds from 12 items per page to 9 and saw a small bump in performance on mobile.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Get started for free

Building a fun, fixed footer

When we solved the puzzle of infinite scroll, the first thing we noticed was our footer — or rather, its absence. Because it was previously positioned beneath our CMS collection list, infinite scroll forever banished it below the fold.

This is a classic problem with infinite scrolling, but Webflow gave us the freedom to get creative!

Clicking the Best Buds footer opens a full window with more information about joining the Best Buds Club.

When designing your footer, take advantage of fixed positioning. Anchor your new footer element to the bottom of your page and increase its z-index to be higher than your CMS content, but lower than any modals you might have.

This way your footer will always be visible.

We decided to go a step further. We optimized our visitor’s vertical browser height by breaking the footer into 2 parts:

1. Footer peek: A slim bar at the bottom of the page that takes up no more than 50px

2. Footer content: Our standard footer content

Expanded footer window containing social links, sign-up form, etc.

Using 2 divs in our footer symbol allowed us to take advantage of Webflow’s Interactions. Toggling our peek element transitions the content element into frame without sacrificing precious screen real estate.

The possibilities are infinite! And there’s no better tool than Webflow to experiment with unique interactions — footer or otherwise.

A gift from the gift experts

Congratulations! Your website is now ready to scroll into a new dimension where your visitors are happier and sticking around longer.

Consider this small discovery our gift to you, new internet friend!


January 8, 2020



Join the conversation

What's Webflow?

Try it for free
More about the Designer


The power of CSS, HTML, and JavaScript in a visual canvas.


Build website interactions and animations visually.

More about Interactions


Define your own content structure, and design with real data.

More about the CMS


Goodbye templates and code — design your store visually.

More about Ecommerce


Edit and update site content right on the page.

More about the Editor


Set up lightning-fast managed hosting in just a few clicks.

More about Hosting