react-scroll-to-element

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

License

MIT