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

Parameter	Explain	Type	default
offsetTop	Back to the position of a specified number of pixels from the top	number	0
step	The distance each time you move. Used to control the speed of movement.The larger the value the faster	number	50
isPercent	Whether to display the current content as a percentage of all content (excluding offsetTop)	Boolean	true
visiblePercent	Less than this percentage does not show percent.Valid when 'isPercent' is true	number	1
animate	Animation when 'Percent' showing or hiding	'fade','rotate','none'	'fade'
mainStyle	Custom component style,You can replace any picture	style object	{}
percentStyle	Custom 'Percent'component style	style object	{}