React Anchor Link Smooth Scroll
React component for anchor links using the smoothscroll polyfill.
Instructions
-
Install dependency:
npm install react-anchor-link-smooth-scroll
-
Add script
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 -
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.12 (February 5th 2019) @vai0 Modifies how the distance from the top of the page to the anchor element is calculated.
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.