React component to add custom buttons for scrolling to top of page
Clone or download
Pull request Compare This branch is 34 commits behind milosjanda:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
index.js
package.json
scrollUp.jsx

README.md

react-scroll-up

npm version License Dependency Status peerDependency Status

React component to add custom button (it can be something what you want) for scroll to top of page.

Library uses requestAnimationFrame, if you want better browser compatibility (IE9 and older), you can use something like [https://gist.github.com/paulirish/1579671].

Install

npm install react-scroll-up

How to use it

Live demo

You have to define children element, for example <span>UP</span>

<ScrollToTop showUnder={160}>
  <span>UP</span>
</ScrollToTop>

Parameters

showUnder:number in px (required)

What position (and below) the button will be displayed.

topPosition:number in px (optional)

default: 0

The position to which the scrollbar be moved after clicked.

easing:string (optional)

default: easeOutCubic

Type of scrolling easing. You can specify some of this type of easing: https://github.com/chenglou/tween-functions

In graphical representation: http://sole.github.io/tween.js/examples/03_graphs.html

duration:number in miliseconds (optional)

default: 250

Time to reach the topPosition

style:object (optional)

default:

{
  position: 'fixed',
  bottom: 50,
  right: 30,
  cursor: 'pointer',
  transitionDuration: '0.2s',
  transitionTimingFunction: 'linear',
  transitionDelay: '0s'
}

You can specify you own style and position of the button.

Hide/show button is based on opacity, so this styles opacity and transitionProperty will be all time overwrite.

If you can positioned button to left site, you have to reset css property right: 'auto', and similar.