anchorate

Scroll to anchor links.

Scroll to anchor links with client-side routes e.g. with history's listen, React Router's onUpdate, or Gatsby's onRouteChange. Register a listener to call this and when window.location.hash isn't empty, it'll scrollIntoView first matching element by id or name per spec.

Originally based on: remix-run/react-router#394 (comment)

Install

npm install --save anchorate

Use

history

import { anchorate } from 'anchorate'
import { createHistory } from 'history'
 
const history = createHistory()

history.listen(() => {
  anchorate()
})

React Router

import { anchorate } from 'anchorate'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'

function onUpdate () {
  anchorate()
}

// ...

render((
  <Router
    onUpdate={onUpdate}
    history={browserHistory}
  />
), document.getElementById('app'))

Gatsby

In gastby-browser.js:

import { anchorate } from 'anchorate'

exports.onRouteChange = () => {
  anchorate()
}