reactjsgatsby

How to fix Gatsby JS Link component retaining scroll position and not resetting to top

I'm setting up a website using Gatsby 2.2.10 and the Link components are retaining the scroll positions of the previous page and not scrolling back to the top when they're clicked. 

<div className="Footer__legal body">
 <p>© {new Date().getFullYear()} My Nice Company</p>
 <Link to="/privacy-policy">Privacy Policy</Link>
 <Link to="/page-2">Page 2 Link component</Link>
</div>

Expected behaviour:

When you click 'Privacy Policy', 'Page 2' or any page at the bottom of the website, I expect the page to load with user being back at the top.

Actual Behaviour:

User stays at scroll position of the current page

Solution

  • If you have overflow: hidden or overflow: auto set on body, you'll have this issue!