BackTop
BackTop
makes it easy to go back to the top of the page.
When To Use#
When the page content is very long.
When you need to go back to the top very frequently in order to view the contents.
Examples
Scroll down to see the bottom-right gray button.
import { BackTop } from 'antd';
ReactDOM.render(
<div>
<BackTop />
Scroll down to see the bottom-right
<strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
button.
</div>,
mountNode,
);
Scroll down to see the bottom-right blue button.
import { BackTop } from 'antd';
ReactDOM.render(
<div>
<BackTop>
<div className="ant-back-top-inner">UP</div>
</BackTop>
Scroll down to see the bottom-right
<strong style={{ color: '#1088e9' }}> blue </strong>
button.
</div>,
mountNode,
);
#components-back-top-demo-custom .ant-back-top {
bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 4px;
background-color: #1088e9;
color: #fff;
text-align: center;
font-size: 20px;
}
API#
The distance to the bottom is set to
50px
by default, which is overridable.If you decide to use custom styles, please note the size limit: no more than
40px * 40px
.
Property | Description | Type | Default | Version |
---|---|---|---|---|
target | specifies the scrollable area dom node | () => HTMLElement | () => window | |
visibilityHeight | the BackTop button will not show until the scroll height reaches this value | number | 400 | |
onClick | a callback function, which can be executed when you click the button | Function | - |