come to the same position on going back with infinite scrolling

Question

I want to implement a functionality wherein on clicking the back button, i come back to the same position. A good example may be http://www.jabong.com/men/clothing/mens-t-shirts/ . Here, if you scroll down and hit on a product, and click back from the product page, you reach the same position of the page where that product is.

The example shown here doesn't append anything in the url to remember the position. Also, it doesn't use pushstate or history.js (not loading through ajax).

Any insights into how I can do this?

EDIT: Im using infinite scrolling pagination (like pinterest), and the pages keep loading on scrolling down. When I go back, the query runs again and reloads the page. If I was on the 4th page before, after going back, the pages don't load until page 4 and so there's a break, thus I cant reach that position.

So my question is how do I do this with infinite scrolling?

Answer 1

You can use history.replaceState to store the scroll position just before the page is left. When the user comes back you can check if there is some scroll position present in history.state, and if, scroll to that position.

One more thing to consider is that browers can as well persist the page when leaving (if cache policy allows them) and restore it when returning, including scroll position. In that case no browser events will be fired when coming back, besides the pageshow event (check browser support) which will tell you via event.persisted whether the page is served from cache or not. You maybe want to listen to that event to clear the scroll position from the stored state, again via history.replaceState.

Finally, you want to consider that browsers do scroll restoration on their own and you probably need to disable it via history.scrollRestoration (but check browsers support)