gatsby-plugin-smoothscroll

gatsby-plugin-smoothscroll

Polyfilled smooth scrolling behavior and helper function for Gatsby sites.

The plugin uses smoothscroll-polyfill and calls it during the onClientEntry Gatsby lifecycle method.

It also includes a scrollTo helper function as its main export that you can use as onClick event handlers to scroll to the desired element using { behavior: 'smooth' }.

How to install

# npm
npm install gatsby-plugin-smoothscroll

# yarn
yarn add gatsby-plugin-smoothscroll

When do I use this plugin?

When you want a polyfilled smooth scroll behavior without having to manually install and call the polyfill.

Examples of usage

Just add the plugin to the plugins array in your gatsby-config.js:

plugins: [`gatsby-plugin-smoothscroll`];

If you want to use the helper function, import it:

// this could be in your `pages/index.js` file

import scrollTo from 'gatsby-plugin-smoothscroll';

Then use it as an onClick event handler:

<button onClick={() => scrollTo('#some-id')}>My link</button>

Be aware that scrollTo uses document.querySelector() under the hood, so make sure to respect its syntax.