react-scroll-to-element
Scroll to any element of your React application
Getting Started
1. Install
npm install react-scroll-to-element
or
yarn add react-scroll-to-element
2. Options
| Option | Value | Description |
|---|---|---|
type |
string |
id or class - Not required if you want to set offset only |
element |
string |
Scroll to this element (use with type) |
offset |
number |
Scroll x pixels down |
timeout |
number |
Start scrolling after x ms |
children |
string |
Text or html tags |
3. Usage
; <Scroll type="id" element="title"> Scroll to element with id 'title'</Scroll> <Scroll type="class" element="contact"> Scroll to element with class 'contact'</Scroll> <Scroll> Scroll to top</Scroll> <Scroll offset=200> Scroll 200 px </Scroll> <Scroll offset=200 timeout=3000> Scroll 200 px after 3 seconds</Scroll> <Scroll type="class" element="contact" offset=200 timeout=3000> Scroll to element with class 'contact' + 200 px down after 3 seconds</Scroll> <Scroll type="class" element="contact" offset=-100> Scroll to element with class 'contact' - 100 px</Scroll>You can also use html tags inside the component
<Scroll type="class" element="contact" offset=-100 timeout=3000> <button>Click me</button></Scroll>smoothscroll-polyfill used for older browsers