# gatsby-plugin-anchor-links > Gatsby plugin for using anchor links with a Gatsby Link component. Latest version **1.2.1** (published 2021-01-27) · MIT license · 0 weekly downloads ## Install ```sh npm install gatsby-plugin-anchor-links pnpm add gatsby-plugin-anchor-links yarn add gatsby-plugin-anchor-links bun add gatsby-plugin-anchor-links ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.1 | | Published | 2021-01-27 | | First published | 2020-02-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 17.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Chase Ohlson | | Maintainers | brohlson | | Keywords | gatsby, gatsby-plugin, gatsby-source-plugin, gatsby-anchor-links, gatsby-plugin-anchor-links | ## Links - npm: https://www.npmjs.com/package/gatsby-plugin-anchor-links - Homepage: https://github.com/brohlson/gatsby-plugin-anchor-links - npm.io page: https://npm.io/package/gatsby-plugin-anchor-links ## Dependencies (1) - [scroll-to-element](https://npm.io/package/scroll-to-element.md) ^2.0.3 ## Alternatives - [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads - [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads - [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads - [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads - [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads ## Recent versions - 1.2.1 (latest) — 2021-01-27 - 1.2.0 — 2020-11-04 - 1.1.1 — 2020-03-17 - 1.1.0 — 2020-02-13 - 1.0.11 — 2020-02-02 - 1.0.10 — 2020-02-02 - 1.0.9 — 2020-02-02 - 1.0.8 — 2020-02-02 - 1.0.7 — 2020-02-02 - 1.0.6 — 2020-02-01 - 1.0.5 — 2020-02-01 - 1.0.4 — 2020-02-01 - 1.0.3 — 2020-02-01 - 1.0.2 — 2020-02-01 - 1.0.1 — 2020-02-01 - … 1 more at https://npm.io/package/gatsby-plugin-anchor-links/versions ## README ![Banner](https://i.imgur.com/H572MIB.jpg "Banner") # 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) --- _Source: https://npm.io/package/gatsby-plugin-anchor-links · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._