https://github.com/trembacz/react-scroll-to-element

Scroll to any element of your React application
https://github.com/trembacz/react-scroll-to-element

class element id offset pixels react scroll

Last synced: 8 months ago
JSON representation

Scroll to any element of your React application

• Host: GitHub
• URL: https://github.com/trembacz/react-scroll-to-element
• Owner: trembacz
• License: mit
• Created: 2017-11-25T22:23:49.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-01-17T21:10:24.000Z (about 6 years ago)
• Last Synced: 2025-05-16T21:14:50.702Z (9 months ago)
• Topics: class, element, id, offset, pixels, react, scroll
• Language: JavaScript
• Homepage:
• Size: 18.6 KB
• Stars: 11
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-scroll-to-element

Scroll to any element of your React application

[![Build Status](https://travis-ci.org/trembacz/react-scroll-to-element.svg?branch=master)](https://travis-ci.org/trembacz/react-scroll-to-element)

[![Dependencies](https://david-dm.org/trembacz/react-scroll-to-element/status.svg)](https://david-dm.org/trembacz/react-scroll-to-element?view=list)

[![devDependencies](https://david-dm.org/trembacz/react-scroll-to-element/dev-status.svg)](https://david-dm.org/trembacz/react-scroll-to-element?type=dev&view=list)

## 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**

```js

import Scroll from 'react-scroll-to-element';

  Scroll to element with id 'title'

  Scroll to element with class 'contact'

  Scroll to top

  Scroll 200 px down (from top)

  Scroll 200 px down (from top) after 3 seconds

  Scroll to element with class 'contact' + 200 px down after 3 seconds

  Scroll to element with class 'contact' - 100 px

```

***You can also use html tags inside the component***

```js

  Click me

```

[smoothscroll-polyfill](https://github.com/iamdustan/smoothscroll) used for older browsers

## License

[MIT](http://opensource.org/licenses/MIT)