The Most Secure Cross Browser Testing Platform since 2012


3 Ways to Handle The Back Button On Infinite Scroll Pages

Cross Browser Testing

3 Ways to Handle The Back Button On Infinite Scroll Pages

As social media sites, such as Twitter and Pinterest, have continued to grow in popularity, more and more users have come their way. However, while these and other sites have strived to become more user-friendly, there are nevertheless various situations that still have many users feeling frustrated. One of these involves the infinite scroll page, which has its good and bad points. While used as a way to let a site load more and more content, it also keeps the site’s user having to continually start over. This happens when the person uses the infinite scroll back button, which rather than saving their place automatically puts them at the top of the page, wasting time and effort. For those who have been looking for a solution to this problem, three possibilities exist.

Open All Links in New Tabs or Modal Dialogs

This first possible solution, to the infinite scroll back button issue, involves using scrollFrame to open the next page in a modal window, which eliminates the need to use the back button altogether. Instead, scrollFrame is able to intercept the click of the mouse and open the next page in an iframe, sitting on top of the current page and covering the viewport. By doing so, the user’s URL is kept up-to-date, solving the problem.

Save the Element inside the URL

Users who are still experiencing infinite scroll back button problems can instead look to the HTML5 History API for help. By using the replacestate function in the History API, a user can in effect tell the browser the URL has changed and the new one should be used if a closed tab is reopened. By supporting incoming URLs, this allows for the elimination of the back button and allows a person to keep their place on the website.

Using an Overlay Menu

Some infinite scroll web pages, that have users experiencing infinite scroll back button problems, have begun to use an overlay menu to make it easier to find out what the user wants to do. This is done with the intention of highlighting what the user wants to do on the website and sometimes more quickly clarifies the situation than other methods used as possible solutions.

While each of these three solutions offers users ways to avoid or eliminate the back button problems experienced on sites that constantly load content, the easiest and most logical solution appears to be opening all links in new tabs. By being able to eliminate needing to use the back button all together, users should have an easier experience using these and other similar sites.

Photo by Bradley Davis