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: 3 months 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 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T10:43:52.000Z (about 2 years ago)
• Last Synced: 2024-10-01T15:59:51.710Z (4 months 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.