zauni/react-anchor-link-smooth-scroll

React component for anchor links using the smooth scroll polyfill.

React Anchor Link Smooth Scroll

React component for anchor links using the smoothscroll polyfill.

Instructions

1. Install dependency: npm install react-anchor-link-smooth-scroll

2. Add script

import React from 'react'
import ReactDOM from 'react-dom'
import AnchorLink from 'react-anchor-link-smooth-scroll'

const SmoothScroll = () => (
  <div>
    <AnchorLink href='#things'>Things</AnchorLink>
    <AnchorLink href='#stuff'>Stuff</AnchorLink>

    <section id='things'>
     <h2>Things</h2>
    </section>
    <section id='stuff'>
      <h2>Stuff</h2>
    </section>
  </div>
)

ReactDOM.render(
  <SmoothScroll />,
  document.getElementById('content')
)

3. Options; offset the amount of pixels from the top, for if you have a sticky navigation.

 <AnchorLink offset='100' href='#things'>Stuff</AnchorLink>

Licence

Licensed under the MIT Licence.