react-scrollspy-nav is a React component that provides smooth scrolling navigation to the page. It also accounts for the factor that a React app may use different React router and therefore has different url patterns (for example the hash pathname in HashRouter).
See the Demo.
npm install react-scrollspy-nav
import React, { Component } from "react"; import ScrollspyNav from "react-scrollspy-nav"; class App extends Component { render() { return ( <div> <ScrollspyNav scrollTargetIds={["section_1", "section_2", "section_3"]} offset={100} activeNavClass="is-active" scrollDuration="1000" headerBackground="true" > <ul> <li><a href="/"><span>Home</span></a></li> <li><a href="#section_1"><span>Section 1</span></a></li> <li><a href="#section_2"><span>Section 2</span></a></li> <li><a href="#section_3"><span>Section 3</span></a></li> </ul> </ScrollspyNav> <div> <div style={{"height": "400px"}}><span>Welcome!</span></div> <div id="section_1" style={{"height": "500px"}}><span>Section 1</span></div> <div id="section_2" style={{"height": "500px"}}><span>Section 2</span></div> <div id="section_3" style={{"height": "500px"}}><span>Section 3</span></div> </div> </div> ); } } export default App; Notes
- The above code provides the skeleton for it to work. You need to style the nav and the target sections yourself to achieve better effect
style={{"height": "500px"}}here is only an example to put more height for each sectiondivto make the page scrollable
Props that can be passed to Component ScrollspyNav for configuration.
| Name | Type | Description | Example Value |
|---|---|---|---|
| scrollTargetIds | Array | List of scroll targets ids | ["section_1", "section_2", "section_3"] |
| offset | Number | Offset pixels to the scrollTargetIds. Default is 0 | 100 |
| activeNavClass | String | Class name for styling the nav link that's currently active | "is-active" |
| scrollDuration | String | Scroll duration for controlling how fast the nav click scrolls to its section. Default is "1000" | "1000" |
| headerBackground | String | If header has background color or not, for accurate scroll position, Default is "false" | "true" |
| router | String | The name of router used in react app if any | "HashRouter" |