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:

`
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|{}