Instantsearch Vanilla JS - Save scroll position on back button

I have built a site that displays numerous paintings. The user can select a painting then view that in a new page. When the user clicks the back button. I want the scroll to show back to the painting where the user was previously positioned.

I have tried using the following code:
(window).on("scroll", function () { sessionStorage.scrollPos = (window).scrollTop();
});
var init = function () {
$(document).scrollTop(sessionStorage.scrollPos || 0);
};
window.onload = init;

This code works maybe 70% of the time but is inaccurate.

Can somebody assist me with a more robust solution?

Thanks in advance.

Hi @elena,

It’s a common issue with InstantSearch, we don’t have a bullet proof solution for this.

One possible solution is to sync the page number with the URL. With this solution the first hits displayed will be the first hits of the page you actually are. It has the downside to not display all the previous page, and we’re not able to load them. It depends of your use case and what you want to achieve.

The other solution is the one you’ve implemented. It has also a downside of loading only the first page which means that if the user was deep enough into the search he cannot find the hit where it was.

We plan to improve the first solution to add a “Show previous” button to be able to go back to the previous page one by one. It’s something that we plan to do in the next months to actually address this issue.

Hope that helps,

Cheers!

Hi Samuel,

Thanks for your response.

That is helpful. We currently utilise a show more button (similar to infinite hits) so the search results appear only on one page and we have a hash in the url to show items returned. That seems to work well it’s just the above code doesn’t seem to work effectively. Assuming that it is a limitation of sessions?

I saw in the docs about the routing. Would delving further into that provide us with a solution? Or is that more for providing facets etc in the URL for SEO etc?

Thanks again

Hi,

I’m not sure where the issue come from, would mind create a reproducible example of the issue? That would help to better understand the problem. Here is a template for InstantSearch.js.

I’m not sure I fully understand the second question: the URL sync feature saves the state of the search inside the URL each time an interaction occurs. Which means that if you copy/paste the URL to a new window the state of search is restore. The downside of this approach with infiniteHits is what I’ve explained in the previous message.

Cheers!

Hi @samuel.vaillant, have you implemented solution of this issue? or it still works incorrectly in the latest version on algolia instantJS?

Hi @faltsman,

We do have made some progress in that direction.

We’ve released a new option called showPrevious on the infiniteHits widget. The option display a button that allows the user to get previous pages. We fetch only the pages one by one because the number of previous pages could be huge. Here is an example of its usage.

Hope that helps!