Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brohlson/gatsby-plugin-anchor-links
⚓ Gatsby plugin for using smooth scroll anchor links with a Gatsby Link component
https://github.com/brohlson/gatsby-plugin-anchor-links
gatsby gatsby-anchor-links gatsby-link gatsby-plugin
Last synced: 6 days ago
JSON representation
⚓ Gatsby plugin for using smooth scroll anchor links with a Gatsby Link component
- Host: GitHub
- URL: https://github.com/brohlson/gatsby-plugin-anchor-links
- Owner: brohlson
- License: mit
- Created: 2020-02-01T20:48:22.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-13T09:18:05.000Z (over 3 years ago)
- Last Synced: 2024-12-26T14:07:53.789Z (13 days ago)
- Topics: gatsby, gatsby-anchor-links, gatsby-link, gatsby-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gatsby-plugin-anchor-links
- Size: 1.36 MB
- Stars: 68
- Watchers: 3
- Forks: 22
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - gatsby-plugin-anchor-links
README
# Gatsby Smooth Scroll Anchor Links
## Why? What does this do?
Many sites use a mixed navigation format in which some links route to other pages, while some anchor a smooth scroll to sections within a specific page -- but both types still need to function well regardless of what page the user is currently on. This can be a little cumbersome to accomplish elegantly. This plugin aims to provide that. You can read a little more about the evolution of the logic in the plugin on my [web development blog](https://chaseohlson.com/gatsby-link-anchor-navigation).
This plugin adds a check `onRouteUpdate` - which looks for hashes in the current pathname. If so, it uses a scrolling library to scroll to the provided hash. In addition, it provides component(s) for use in your Gatsby code to which you can provide both hashed & non-hashed `to` paths.
## Installation
Using Yarn
- `yarn add gatsby-plugin-anchor-links`
Using NPM
- `npm i gatsby-plugin-anchor-links`
### gatsby-config.js
This plugin can be used with or without a configuration object:
```javascript
module.exports = {
plugins: [`gatsby-plugin-anchor-links`]
};
```
```javascript
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-anchor-links",
options: {
offset: -100
}
}
]
};
```
### Configuration Options
| Option | Description | Default | Type |
| ------ | -------------------: | ------: | -----: |
| offset | # of pixels from top | 0 | number |
| duration | duration of scroll in milliseconds | 1000 | number |
## Component usage
You can provide anchor or non-anchor links to this component for ease of use. If you use it as an anchor component, be sure to include both a base path and hash in the `to` string.
```javascript
import { AnchorLink } from "gatsby-plugin-anchor-links";
export default () => (
Check out our team!
);
// => Check out our team!
export default () => (
);
// => Check out our team!
export default () => (
);
// => Check out our team!
// => Hash will be stripped, and a full page scroll will occure onRouteChange
export default () => ;
// => About us
```
### AnchorLink props
| Option | Description | Type | Required |
| --------- | -------------------------------------------------------------------: | ---------: | -------: |
| to | path with hash to your page & anchor | string | true |
| title | accessible title & fallback anchor text | string | false |
| className | className to be passed to gatsby-link component | string | false |
| stripHash | strips hash from link - forces a full scroll to target onRouteChange | boolean | false |
| gatsbyLinkProps | a passthrough object which is spread into Link props | object | false |
| onAnchorLinkClick | a function to be called when the anchor link handler is fired | function | false |
| children | react node to be wrapped by AnchorLink | react node | false |
#### A note on `stripHash`
When passing a hashed `to` prop to the link component - browsers will automatically try to get you there when the route changes. If you have some offset value, you'll see some scrolling action. If you don't, you'll just see a static route change directly to the hash.
The `stripHash` prop will route to the base path of your `to` prop, save the hash on the `window`, then navigate to it. As far as semantic HTML & Google SERP nav links concerned, this probably isn't exactly 100% kosher in every sitation, but it achieves the desired effect for many that are looking for this kind of solution. So, take this with a grain of salt.
## Sites using Gatsby Anchor Links
- [chaseohlson.com](https://chaseohlson.com/) // [source](https://github.com/brohlson/chaseohlson)
## Credits
- Anchor logo by dData via [Noun Project](https://thenounproject.com/dDara)