Could someone help me with this issue? I’m encountering a problem while developing a React project. I’ve created several components, including a header and footer, and linked them using React Router DOM. Now, suppose I scroll to the footer on the homepage and then click on a link to another component, instead of starting from the top, it resumes from where I last scrolled. I attempted to use useEffect to render components afresh upon navigation, but this introduced another issue, submit buttons trigger animations to highlight errors when empty, but they unexpectedly scroll the page to the top upon clicking, which is quite disruptive. Furthermore, I’ve implemented a popup login box that only occupies half the screen, but clicking its login button also causes the page to scroll to the top.

I tried this,

1. const ScrollToTop=()=>{
2. const { pathname } = useLocation();
3. useEffect(() => {
4. window.scrollTo(0, 0);
5. },[pathname]);
6. }

but facing the mentioned issue.