gatsby-plugin-smoothscroll-offset

This plugin has been adapted from the ’gatsby-plugin-smoothscroll’ plugin that allows for an offet to be set on the scroll to position.

How To Install

# npm
npm install gatsby-plugin-smoothscroll-offset

When To Use This Plugin?

When you want a smooth scroll behavior with an optional offet position.

Examples of Usage

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.