react-scroll-to-element
v0.2.0
Published
Scroll to any element of your React application
Downloads
1,211
Maintainers
Readme
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
import Scroll from 'react-scroll-to-element';
<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 down (from top)
</Scroll>
<Scroll offset={200} timeout={3000}>
Scroll 200 px down (from top) 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