<a> tag goes to new page, but does not go to the top of the new page - html

Question

I'm working on a gatsby-react project that has multiple pages. On the header & footer there are links to other pages within my project. When I click on the link, the URL changes, the browser loads the new page and renders it normally.
The only problem is that the new page isn't loaded from the top. For example, if I'm currently viewing the bottom of the page and I click a link, then I expect to be taken to the top of the new page. What happens is I am taken to the new page, but I stay at the bottom. This image should explain what I mean.
I'm NOT using GatsbyLinks as they cause problems in the project, I use normal <a> tags for links instead.
Can I add anything to the <a> tag that can force going to the top of the page? If not then is there some other linking component I can use?
Thanks in advance!

Answer 1

The process of scroll restoration is handled automatically by Gatsby, however, using anchor links (<a>) for internal navigation (outside the scope of React) may lead to this kind of issue, since the data of the page it's cached but you are not using internal navigation to manage or restore it.
That said, I would suggest using the useScrollRestoration hook when needed:
import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"
export default function PageComponent() {
const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)
return (
<ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
)
}
For a more global approach, you can also play with gatsby-browser.js APIs such as onRouteUpdate and shouldUpdateScroll, both triggered in each change of page (navigation):
exports.onRouteUpdate = () => {
if (typeof window !== `undefined`) { window.scrollTo(0, 0)}
}
exports.shouldUpdateScroll = args => {
return false;
};
By default, shouldUpdateScroll gets the last scrolled position, ideally, just changing and returning false it should work for your described scenario.