https://github.com/freddydumont/gatsby-plugin-smoothscroll
Polyfilled smoothscroll behavior and helper function for gatsby sites
https://github.com/freddydumont/gatsby-plugin-smoothscroll
gatsby gatsby-plugin gatsbyjs polyfill scroll scrollintoview smooth smooth-scrolling smoothscroll
Last synced: about 1 year ago
JSON representation
Polyfilled smoothscroll behavior and helper function for gatsby sites
- Host: GitHub
- URL: https://github.com/freddydumont/gatsby-plugin-smoothscroll
- Owner: freddydumont
- Created: 2019-09-18T20:05:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T10:43:52.000Z (over 3 years ago)
- Last Synced: 2025-02-15T18:55:05.254Z (over 1 year ago)
- Topics: gatsby, gatsby-plugin, gatsbyjs, polyfill, scroll, scrollintoview, smooth, smooth-scrolling, smoothscroll
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gatsby-plugin-smoothscroll
- Size: 135 KB
- Stars: 17
- Watchers: 3
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-plugin-smoothscroll
Polyfilled smooth scrolling behavior and helper function for Gatsby sites.
The plugin uses [`smoothscroll-polyfill`](https://www.npmjs.com/package/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
```bash
# 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`:
```js
plugins: [`gatsby-plugin-smoothscroll`];
```
If you want to use the helper function, import it:
```js
// this could be in your `pages/index.js` file
import scrollTo from 'gatsby-plugin-smoothscroll';
```
Then use it as an `onClick` event handler:
```jsx
scrollTo('#some-id')}>My link
```
Be aware that `scrollTo` uses [`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) under the hood, so make sure to respect its syntax.