Hi there! I have this collection page list, I’m planning to have a lot of items, so if a user click a product item (which redirects them to the product item page) and then decides to go back clicking the “go back” button, the collection page just reloads itself, making the user scroll to the bottom again, I wanted to store the scrollY and then just jump to that coordinate when the page its reloaded, for some reason it always goes at 778pixel deep, here is the code im using
let storedScrollPosition = sessionStorage.getItem("sidebarScroll");
// If a stored scroll position exists, scroll the sidebar to that position
if (storedScrollPosition !== null) {
document.documentElement.scrollTop = document.body.scrollTop = Number(storedScrollPosition);
}
// Store the scroll position in sessionStorage before the page is unloaded
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("sidebarScroll", window.scrollY || document.documentElement.scrollTop);
});
While seamless pagination with custom code is possible for Collection lists, preserving scroll positions between page navigations requires additional JavaScript implementation. You can consider these approaches:
The most common method is to store the scroll position in sessionStorage before navigation and restore it when the new page loads. You can also explore using the History API’s state object to maintain scroll position during navigation.
For a simpler solution, you might want to consider implementing infinite scroll instead of pagination, which naturally maintains the user’s position as new content loads. This can be achieved using Webflow’s native pagination element combined with custom code, or through integrations with tools like AJAX loading.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
I’ve already used custom code, the problem is not mantaining the scroll position when the user is scrolling through products but when he is going back and forth from the catalogue page to the specific product page, anyone might have a solution for this?
I wanted to test the page out but since its gated via Memberstack, I was not able to access the page.
That being said, I noticed you have a custom back button in each Pietre page. Instead of having it as a link to the Catalogo page, you could add an ID to the back button, for example ‘customBack’ as shown in the screenshot:
This should help you in reserving the scroll position without storing the scroll position in this case. I have tested this approach in a personal dummy site with finsweet load (with pagination) and it works.
Hi Aj, thank you so much for your response, I tried your solution but somehow it always drags me back at a certain height, in particular I noticed that, before a certain scroll height (778px), if I click a product card and then go back, it actually goes to the right scroll position, if somehow I scroll past 778px, regardless where I’m in the page (eg. 1227px), if I click a product and then go back it would drag me back at 778px, before this scroll height it works fine. Any idea way? Thank you so much again!
Is there a way for me to test this experience? I did signup using a dummy email today, but am not able to access the Catalogo page, testing this on the test mode site might help in troubleshooting.
I tested this use-case with a Finsweet list of 1230+ CMS items with pagination enabled and it works exactly as you would intend it to, even if I am on the 6th page of the list (the scroll position being 1740 in that case).
So let me know if testing your site would be possible in order to see what might be causing this experience
