react-back-to-top v1.0.3

react-Back-To-Top

a customizable back-to-top component for react

Install

npm i react-back-to-top

or

yarn add react-back-to-top

Use

First import into the project:

import BackToTop from 'react-back-to-top';

Used is JSX:

<BackToTop
    mainStyle={{
        width:'100%',
        height:'100%',
        background:'url(...)'
    }}
    percentStyle={{
        width:'100%',
        height:'100%',
    }}
    animate='rotate'
    offsetTop={20}
    step={50}
    percent={true}
    visiblePercent={50}
  />

Custom animation

If you do not like the preset animation,you can customize the animation like this:

your css:

.c-animate-hide{
   transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transform: translateY(100%)
}
.c-animate-show{
   transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transform: translateY(0)
}

Under these two class names, you can use transitions or other transitional animations to achieve your favorite effects

API