@qwp/react-scroll-up

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 @qwp/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)

other props...

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.