BackTop 回到顶部
返回页面顶部的操作按钮。
何时使用 #
-
当页面内容区域比较长时；
-
当用户需要频繁返回顶部查看相关内容时。
代码演示
最简单的用法。
import { BackTop } from 'antd';
ReactDOM.render(
<BackTop />
Scroll down to see the bottom-right
<strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
button.
</div>,
mountNode
);
可以自定义回到顶部按钮的样式，限制宽高：
40px * 40px
。
import { BackTop } from 'antd';
ReactDOM.render(
<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;