Where do I have to put the window.scrollTo(0,0) call in a react component?
I tried to put it directly into render and also tried componentDidUpdate (to wait till everything is rendered), but somehow the scrollbars always stay at the same position.
-- Edit --
The problem was CSS height/overflow of the window and body.
window.scrollTo only works when the scroll behavior is set on html.
If scroll is set on body then document.querySelector("body").scrollTo(0,0)
If you have set overflow: scroll on some container inside of the DOM, then that need to be accessed. Assign an id to that. For example I have below div container for which I have set overflow: scroll.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root">
<div id="scroller">
<!-- other content -->
</div>
</div>
</body>
</html>
Then for scrolling behavior, you need to query the scroller.
const scrollToTop = () => {
document.getElementById("scroller").scroll(0,0)
}
<button onClick={scrollToTop}>Scroll to Top</button>
This would work perfectly.
Well, window.scrollTo(0,0) would always stick to the top of the page.
You are correct in saying this code should live in the componentDidMount function, but you need to tell it where to scroll. I would locate the id of the element you want to scroll to and obtain it's y coordinates, than you enter that into the window.scrollTo and it should work. You may need to get the height of the component and add that to this dymamic value you obtained.
Another scenario could be that the application is not set up to have the window handle its scrolling. It could be a 'widget' where the window is static and an inner element handles the scrolling. A good way to test this is to enter window.scrollTo(0,0) right there in your console. If your window doesn't pop to the top there, you'll need to seek another solution. Likely you'll need to get the element that is doing the actual scrolling and handle it with Element.scrollTo(0,0)
Like @Reed Black mentioned in his answer, the problem might be window.scrollTo(0,0) does not work for the particular app.
I encountered this problem in an open-source project. The app won't scroll using window.scrollTo(0,0) like other websites would.
I had to use document.querySelector('body').scrollTo(0,0) to make it work.
I tried everything I found on this issue with React, the only one that worked for me was with 'scrollIntoView' seen in this below code;
document.getElementById('element')?.scrollIntoView({ behavior: 'smooth' });
Somehow the querySelector didn't work for me. But the getElementById did. Here's an example for trigger the 'scroll back to top' from another component.
export default function View() {
return <div id='view'> A </div>
}
export default function Button() {
const backToTop = () => {
document.getElementById('view').scrollTo({ top: 0, behavior:
'smooth'
})
}
return <button onClick={backToTop}>Back to Top</button>
}
export default function App() {
return (
<ComponentA/>
<Button/>
)
}
Well, it is React and direct DOM manipulations are unwelcome. One can solve this with ref, however it may seem a little bit cumbersome. Namely, one must have an element like Header on the page visible top and agree that scrolling to have this element in view is what one wants.
The simplified example from my page(with TS) is as follows:
const Page = () => {
const ref: React.Ref<HTMLHeadElement> = React.createRef();
const goToHeader = () => {
if (ref.current) {
ref.current.scrollIntoView({ behavior: "smooth" });
}
};
return (
<>
<Header ref={ref} />
...any content here...
<button onClick={goToHeader}>TEST</button>
</>
);
};
Header is:
const Header = forwardRef((props: Props, ref: Ref<HTMLHeadElement>): JSX.Element | null => {
return (
<header className="WeatherInformationsPage__header" id="header" ref={ref}>
... any actual content goes here ...
</header>
);
});
export default Header;
For React, this works perfectly
useEffect(() => {
window.scroll(0, 0);
}, []);
