Infinite Scroll Plugin for effortless content navigation


Web apps like Facebook have experimented with a technique called infinite scroll, and now there is a simple Plugin that makes it simple to add it to your WordPress blogs.

Infinite scroll is a Javascript Plugin by Paul Irish that grabs more posts dynamically from archive pages and displays them on the bottom of the page as the visitor scrolls down. This Plugin, created by Dirk Haim, adds the necessary Javascript and offers options for tweaking its settings.

Using Infinite Scroll

Install the Plugin and pull up the settings screen. Setup is pretty simple; the Plugin needs the CSS class paths down to the different elements on the site. This is how Plugin finds the next page of content, and knows where to put in when it pulls it in.

First, enter the CSS path to your content and post containers. Ours look like this:

Next, you’ll want to set the CSS selectors for the post navigation links:

There are a few other options available, but these are the only ones you need to edit to get the Plugin functioning. Assuming you’ve filled this our correctly, you should have an infinitely scrolling home page.

The Plugin will work on any page that has a standard WordPress loop, so your home page, archive pages, and tag pages should all be set to go. If you’re interested in implementing this technique in a less-than-standard way, you can always go straight to the Javascript and work from there.

What about you?

Have you ever used the Infinite Scroll Plugin? Granted, it’s not something that should be used everywhere, but with the right execution it can be really slick. Where have you implemented it? Any examples?

6 thoughts on “Infinite Scroll Plugin for effortless content navigation

    • It’s true, it does bring along with it some tough issues.

      I remember when Facebook implemented it, for a while. At the time I was running some Facebook ads, and would use the “Advertising” link at the bottom of the page. With the infinite scrolling on, I would have to fight with the auto-loading page, racing it to be able to click the link before it jumped away. So yeah, that’s not a good implementation of it.

      For the right purpose, in the right web app, it could serve a purpose. But probably not many blogs.

    • There’s a plugin I tried out the other day that takes care of the ‘specific page’ problem. It’s called WP-PageScroll. It’s Infinite Scroll, but with page numbers floating in the bottom right corner. I can’t say much about how it works because I was having static front page pagination issues (which meant pages didn’t work anyway), but it looks good.

  1. One of the arts of creating a simple, usable, intuitive navigation system is to be able to predict what the user will want to do with your content. A good navigation system relies on the notion that you know the limit of the content you’re displaying and you should be able to communicate that to the user through your navigation. Users hate not knowing where there are, or “mysterty meat” navigation systems — they just leave people confused, or worse, hating your site and leaving.

    Infinite scroll tries to be clever, but it’s just nasty. You never know how much content might be coming, or when it will end. It can interfere with the other content on the page, and can push links away from the user before they were ready to move on, which means more scrolling back up the page. And if you don’t provide another alternate form of navigation, how do people see your content if they have JavaScript off?

    There are hardly any situations where infinite scroll really benefits the user. It’s an over engineered “solution” to a problem that doesn’t exist.

Comments are closed.