Smooth Scrolling in GatsbyUpdated: January 29, 2021
The following guide describes how to implement smooth scrolling in Gatsby using the smooth-scroll package.
- add the package to your project:
- in your
layout.jscomponent, import the
smooth-scrollpackage after the import statements but just before the component is rendered:
- add the
idproperty to the element on the page you want to navigate to:
Gatsby Linkto navigate to the desired section of the page:
The approach described above works if you are trying to link to elements on the same page.
However, if you want to implement smooth scrolling for every page, you need to use the
Location component from Reach Router in order to access the current location via a render prop.