Infinite Scroll Breaks the Back Button

But there’s an easy fix!

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.



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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeff Stephens

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