I have a React project with 3 components (for separate web pages). If I scroll the landing page and then change to other pages, I can see other pages are showing from that scrolled-down position. I have to scroll up to see the page top. How to fix that? Every component has the same parent component .
import React from "react";
import Header from "./Header";
import Footer from "./Footer";
function Layout({ children }) {
return (
<div>
<Header />
{children}
<Footer />
</div>
);
}
export default Layout;
function Artists() {
<Layout>
<div>
<h2>ARTIST</h2>
</div>
</Layout>
}
these children are pages. I tried to give individual scroll bars to each page, then 2 scrollbars appeared one from the body and one from the page. If I am adding overflow: hidden to the body, then other scroll options are not working. Is there any simple way to fix this issue?