Package Exports

react-scroll-up-update
react-scroll-up-update/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-scroll-up-update) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-scroll-up

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

onShow:function (optional)

Callback function to be called when the button is being displayed.

onHide:function (optional)

Callback function to be called when the button is being hidden.

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.