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 ;
Then use it as an onClick
event handler:
<button =>My link</button>
Be aware that scrollTo
uses document.querySelector()
under the hood, so make sure to respect its syntax.