This plugin has been adapted from the 'gatsby-plugin-smoothscroll' plugin that allows for an offet to be set on the scroll to position.
# npm
npm install gatsby-plugin-smoothscroll-offset
When you want a smooth scroll behavior with an optional offet position.
The plugin contains a smoothScrollTo
helper function that can be imported onto the page:
// This could be in your `pages/index.js` file.
import smoothScrollTo from "gatsby-plugin-smoothscroll-offset";
Then use it as an onClick
event handler:
<!-- Without offset -->
<button onClick={() => smoothScrollTo('#some-id')}>My link without offset</button>
<!-- With offset of 80px -->
<button onClick={() => smoothScrollTo('#some-id', 80)}>My link with offset</button>
Be aware that smoothScrollTo
uses document.querySelector()
under the hood, so make sure to respect its syntax.