/react-anchor-link-smooth-scroll

React component for anchor links using the smooth scroll polyfill.

Primary LanguageJavaScript

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')
)
  1. Options; offset the amount of pixels from the top, for if you have a sticky navigation.
 <AnchorLink offset='100' href='#things'>Things</AnchorLink>

Changelog

v1.0.6 (April 10th 2018), @zauni Fixed problem with nested HTML inside the anchor. @roborourke Fixed possibility of a custom onClick handler for secondary side effects.

Licence

Licensed under the MIT Licence.