React component for anchor links using the smooth scroll polyfill.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Remove offset prop from being spread on the <a /> element Jul 23, 2018
src Remove offset prop from being spread on the <a /> element Jul 23, 2018
.gitignore files to ignore Sep 24, 2017
README.md updated grammar Aug 5, 2018
package-lock.json 1.0.11 Aug 5, 2018
package.json 1.0.11 Aug 5, 2018
webpack.config.js

README.md

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.

    • Regular offset

       <AnchorLink offset='100' href='#things'>Things</AnchorLink>
    • For responsive offset you can provide a function returning the needed integer to scroll from

       <AnchorLink offset={() => 100} href='#things'>Things</AnchorLink>

Changelog

v.1.0.11 (July 24th 2018), @ericmasiello Fixed; offset prop from being spread, to avoid remaining props spread to anchor link element.

v1.0.10 (May 30th 2018), @DanMMX Created an option to receive a function for an offset calculation.

v1.0.9 (April 24th 2018), @gazpachu Fix to have hash change in address bar.

v1.0.7 (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.