smooth anchorate

Smooth Scroll to anchor links.

Smooth 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: https://github.com/reactjs/react-router/issues/394#issuecomment-220221604

Install

npm install --save smooth-anchorate

Use

history

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

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

React Router

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

function onUpdate () {
  smoothAnchorate()
}

// ...

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

Gatsby

In gastby-browser.js:

import { smoothAnchorate } from 'smooth-anchorate'

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