React Anchor Link Smooth Scroll v2

This is a fork from react-anchor-link-smooth-scroll with horizontal scroll feature and merged bug fixes.

About

React component for anchor links using the smoothscroll polyfill.

Instructions

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

2. Add script

   1import React from 'react'
   2import ReactDOM from 'react-dom'
   3import AnchorLink from 'react-anchor-link-smooth-scroll-v2'
   4
   5const SmoothScroll = () => (
   6  <div>
   7    <AnchorLink href='#things'>Things</AnchorLink>
   8    <AnchorLink href='#stuff'>Stuff</AnchorLink>
   9
   10    <section id='things'>
   11    <h2>Things</h2>
   12    </section>
   13    <section id='stuff'>
   14      <h2>Stuff</h2>
   15    </section>
   16  </div>
   17)
   18
   19ReactDOM.render(
   20  <SmoothScroll />,
   21  document.getElementById('content')
   22)

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

   • Regular offset

     1 <AnchorLink offset='100' href='#things'>Things</AnchorLink>

   • For responsive offset you can provide a function returning the needed integer to scroll from

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

Changelog

v.1.1.0 (October 28th 2021)

• @john555 Fix collision with 'hashchange' event handlers
• @ktsosno Prevent undefined exception on missing ID
• @Kahoul-ilyes Feature/horizontal scroll

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.