« Back to Writing

Endless Scrolling and Footers

One of the newer trends in web design is the so-called endless or infinite scroll. It's great for reducing initial load time by loading content on a "just in time" basis. But the page's footer will be just out of reach with every scroll, unless you compensate in one of two ways.

For the most part, I really enjoy the endless scrolling paradigm. It works great for sites like Facebook and Google+ where the content is effectively endless. It also works great for sites like Reddit (via the Reddit Enhancement Suite), which in turn doesn't work out so well for my free time.

But I get frustrated pretty quickly if I'm trying to access the footer on any of these sites. Footers usually contain useful links, contact information, careers, help, et cetera. When you scroll to the bottom of these pages, you catch a fleeting glimpse of the footer (of course, never long enough to find the link and click it) before new content is loaded. What's the point of having the footer? Fortunately, after about 3 scrolls-to-the-bottom, some websites relent and end their automatic content-loading, requiring a click on a new Load More button before continuing. Only then can you actually click the footer.

Sure, it's a relatively minor issue, but it's one that frustrates me more often than I'd expect. Fortunately there are two quick solutions for web developers to get the best of both worlds.

Solution 1: Always Require Manual Input

Instead of waiting until the third or fourth time the user reaches the bottom of the page, include the Load More button from the start. It's one extra click, but it shouldn't drive anyone away, and it'll leave people like me much happier.

Solution 2: Position: Fixed

Developers can also solve the problem by fixing the footer's position, keeping it at the bottom of the page at all times. By using the CSS property position: fixed, the footer will remain visible, and the endless scrolling content can load above/behind it. Better yet, the footer could even be hidden until the user scrolls to the bottom for the first time.

In the end, the overall message is this: don't tease the user by keeping a potential target continually just out of reach.

« Next: Autoethnography: Reflecting Upon Computer Mediated Communication

Previous: A Unified Resume and Website “Experience” »