Building page dynamically on scroll - leaving and returning

[nsbmiller]

A website that I coded is using jQuery/Ajax to build the pages dynamically as the user scrolls down.  It is an e-commerce site and each page has a large number of products that would be enormous if loaded all at one so it loads 3 lines of products at a time on demand. 

The problem is that the client has noticed that if you click on a product, which displays a "details" page from which you can buy, and then go back it starts at the top again rather than returns to the position on "the page" from which the visitor clicked.  Apparently other sites successfully manage to built the page dynamically in this way and maintain position when navigating back, but my knowledge of how "virtual pages" work (which is what I consider this to be, as at any point in time it is only a percentage of the page that is loaded) makes it difficult for me to find a solution.

Does anybody have experience of this?

See https://www.shibumistyle.com/en/p368-ladies-silk-cashmere-jacket.html for what I mean... scroll down a few pages and then click on a product to see more information.

Thanks,

Sean

Edited November 23, 2018 by nsbmiller

[requinix]

The trick I would use is window.history and state. You use the state to track where they've gone on the page. On the first load check that state to see if you need to restore something old, and as they scroll and load content you replace the state with something new that gives you enough information to reconstruct where they were.

Another option is having the product details be more of a modal than a separate page. User doesn't lose where they are because they don't leave the page.

[maxxd]

The other obvious solution is to paginate results. Infinite loading is fine and all, but there are issues with it (as you're finding now) that don't happen with simple pagination. For instance, if the user has JavaScript turned off - admittedly not very likely, but possible - window.history and state won't do anything.