Auto scrolling windows to start position on page load


Here is my public share link: LINK
(https://preview.webflow.com/preview/visualhistorian?utm_medium=preview_link&utm_source=designer&utm_content=visualhistorian&preview=cca0796ad99d5fd31bc31adad8ddd7b5&pageId=6822150d3f0974646a2b7de9&workflow=preview)

Hey Wayne, did you have a specific question?

How can I autoscroll two scrolling panels back to their start position (0,0) on page load. I have reviewed the tutorials on this topic, and I can only find animated responses to a user scrolling. However, this feature needs to be automatic in response to a page load event. Sorry for the delay with this answer - I was investigating on my own.

All good, your readonly link is disabled though- can you share a new one and a published page as well to show the problem you’re having?

I placed a new readonly link above - if you scroll the two panels and open a new page, you’ll see that the two panels remain in the scrolled position - I would like them to reset to the top when opening a new page.

When you say open a new page, do you mean navigating using the < > arrows or the top nav menu?

Since they’re separate pages, on Chrome + windows those scrollable areas are initializing at the top of the scrollable area automatically, even when you return to the original page. The exception would be if you click the back button, which is not a new page load, and remembers where you are scrolled to.

Does that align with what you’re seeing, or is e.g. Safari behaving differently?

If you’re talking about the resetting them during a browser back button press, you can control scrolling using javascript, you’d just need to test the page load trigger to ensure it’s firing in that situation.

Correct, I am considering new pages when using the <> arrows. And my concern is with pages visited and scrolled already by the user, which would happen when clicking the back button, as you said.

How can I get information or tutorial that would help me with a javascript routine that would work to scroll when page loading, and where/how could this be added to my webflow program? I have experience writing in several code languages, but not javascript. And I do not know that level of modification of webflow.

Thanks for your help with this.

It’s an unusual approach- typically the point of the back button is to return to a previous page exactly at the state you left it- to the same scroll position, with the same form field entries, and so on.

Since it’s loading from the cache, page load doesn’t re-execute, however I think the pageshow event does.

If you really want to break with the standard browser UX, you can probably use that to detect and reset certain things like page scroll to top, section scroll to top, clear form, etc.

Try using chatGPT before you hire a dev, this is a simple piece.

1 Like