Infinite Scroll Breaks the Back Button

But there’s an easy fix!

Jeff Stephens
May 15, 2013 · 2 min read

In many ways, web usability is at an all-time high, provided you’re using a modern browser. However, something that’s become quite common over the past few years is an infinite scroll mechanism, in which additional content is loaded in the bottom of the current page rather than requiring the user to navigate to a next page of content.

This greatly speeds up browsing by removing the overhead of loading the styles, scripts, headers, etc. for each additional page of content. But in most implementations, it totally breaks the back button! I click a link to view details for a piece of content, press the back button to choose another, and I’m forced to load several pages of content by either clicking a button or scrolling which is incredibly less usable than a separate page for each chunk of content.

There are already techniques for bookmarking states of single-page applications. The #hash accessed via Javascript’s window.location.hash makes this possible. Why not implement this into infinite-scroll applications as well? It’s incredibly easy to set a hash keeping track of the number of times you’ve loaded another page of content asynchronously.

I’ve coded up an example of how I think this should work.

This simple solution fixes my back button and lets us keep our fast infinite-scrolling web apps. Win-win.


Technical Note: Putting the “page number” in the hash is a bad idea — content changes quickly. Using some type of GUID is a much better approach — I found a GUID based on the bottom-most item works well and ensures the same screenful of content no matter how many new items have been added to the top of the list.

    Written by

    I’m a web designer/developer at ReadyTalk in Denver. I like to make things.

    More From Medium

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade