Hey everybody,
I’m pretty new to RedwoodJS so there’s a good chance that I’m missing something basic here. I’ve noticed that when I navigate from page A (which has a lot of content that requires scrolling) to page B, then hit the back button to return to page A, ActiveRouteLoader auto-scrolls me up to the top of the page.
Here’s line 73 of node_modules/@redwoodjs /router/dist/active-route-loader.js:
(_global = global) === null || _global === void 0 ? void 0 : _global.scrollTo(0, 0);
In fact, even if I explicitly scroll to some point in the page, for example by calling:
React.useEffect(() => {
window.scrollTo({ top: searchScroll })
})
I find that ActiveRouteLoader will actually scroll to the top of the page even after the page is loaded. I found a hacky way to get around this by putting my scrollTo function in a timeout:
React.useEffect(() => {
setTimeout(() => {
window.scrollTo({ top: searchScroll })
}, 0)
})
but I would really prefer to find the “Redwood way” to scroll to the right position on the screen. I’m happy to provide any context needed.
Hi @dcorbitt this scrollTo behavior stems from an issue from way back in October 2020:
opened 05:16PM - 15 Oct 20 UTC
closed 09:36AM - 19 Mar 21 UTC
topic/router
topic/web
topic/a11y
As part of Issue https://github.com/redwoodjs/redwood/pull/1284 to correct the "… reload flash" when navigating via Router Links, a decision needs to be made as to how to handle the window's Scroll Postition.
With change to the Router, the window position is maintained.
This means:
* Page A - Scroll 2-3 vertical screen heights
* Navigate to Page B (that also has multiple page screen height)
* You are now on Page B but at the Position of A (ie, not top)
There is discussion with React Router w/ re: to Scroll Position and Restoration here:
https://reactrouter.com/web/guides/scroll-restoration
as well as part of browser history spec:
https://majido.github.io/scroll-restoration-proposal/history-based-api.html#web-idl
In React Router, they have a component that scrolls to top by setting the `window.scrollTo(0, 0)`:
```
class ScrollToTop extends React.Component {
componentDidUpdate(prevProps) {
if (
this.props.location.pathname !== prevProps.location.pathname
) {
window.scrollTo(0, 0);
}
}
render() {
return null;
}
}
```
Perhaps this rule (or option) could be added to the `PageLoader` -- perhaps even as a Page or Route option to either a) always scroll to top or b) only scroll to top it the option is set.
And that will give some context for why it behaves that way.
Maybe this behavior should be configured on a page or route perhaps?