Infinite scroll: how to keep your audience engaged in 2020

Use infinite scroll to create a frictionless CMS experience in no time with gift experts Best Buds.

Jack and Wiggy
May 28, 2019
Tutorials

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!

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 hit a “Next” button, 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:

<!-- Start Infinite Scroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script>

$.noConflict();

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,

     });
});
</script>
<!-- End Infinite Scroll -->

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.

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!

Jack and Wiggy

We're Jack and Wiggy, founders of Best Buds, home of the best gifts for best friends. Follow us on Instagram, Twitter, Facebook, or Pinterest for great gift recommendations, positivity, and friendship wisdom.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

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

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

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

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

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