Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyThis behavior might be caused by the browser's default behavior to restore the scroll position on page reload. If you want to prevent this, you can use the
Here's how you can do it in a class component:
``
Why is my React app auto-scrolling to the bottom on page load?
I’ve built a Vite React app, and there’s some strange behavior. When users click on a product, the page loads but it’s automatically scrolled to the very bottom. It’s pretty frustrating because I either have to scroll up manually or refresh the page multiple times. Did some digging but didn’t find much. The issue is so odd that I’m not even sure which part of the code to share. Any suggestions?
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyThis behavior might be caused by the browser's default behavior to restore the scroll position on page reload. If you want to prevent this, you can use the window.scrollTo function in the componentDidMount lifecycle method (for class components) or the useEffect hook (for functional components) to scroll to the top of the page when the component is mounted.Here's how you can do it in a class component:
``
jsx
class MyComponent extends React.Component {
componentDidMount() {
window.scrollTo(0, 0);
}
// ...
}
`
And here's how you can do it in a functional component:
jsx
import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
// ...
};
`
In both examples, scrolls the window to the top-left corner of the document. The first argument is the x-coordinate and the second argument is the y-coordinate. So (0, 0)` corresponds to the top of the page.