a customizable back-to-top component for react
npm i react-back-to-top
or
yarn add react-back-to-top
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}
/>
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
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 | {} |
<BackToTop
animate='rotate'
offsetTop={20}
step={50}
percent={true}
visiblePercent={50}
>
<div>test</div>
</BackToTop>