Jump to content
nsbmiller

Building page dynamically on scroll - leaving and returning

Recommended Posts

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 by nsbmiller

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.