代码演示 如何引入 import { BackTop } from '@douyinfe/semi-ui';
基本用法 BackTop 预设了基本的返回按钮，可以直接调用。
import React from 'react';
import { BackTop } from '@douyinfe/semi-ui';
class Demo extends React.Component {
render() {
return (
<div>
<span>Scroll down to see the bottom-right gray button.</span>
<BackTop />
</div>
);
}
}
自定义样式 BackTop 预设了默认样式，包括：距离底部 50px，距离右侧 100px，box-sizing 为 border-box，内容水平居中。样式可以覆盖。
import React from 'react';
import { BackTop } from '@douyinfe/semi-ui';
import { IconArrowUp } from '@douyinfe/semi-icons';
class Custom extends React.Component {
render() {
const style = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 30,
width: 30,
borderRadius: '100%',
backgroundColor: '#0077fa',
color: '#fff',
bottom: 100,
};
return (
<div>
<span>
Scroll down to see the bottom-right <span style={{ color: '#0077fa' }}>blue circular</span> button.
</span>
<BackTop style={style}>
<IconArrowUp />
</BackTop>
</div>
);
}
}
API 参考 属性 说明 类型 默认值 className 类名 string - duration 滚动到顶部的时间 number 450 style 样式名 CSSProperties - target 返回值为需要监听其滚动事件的元素对应 DOM 元素的函数 () => any () => window visibilityHeight 出现 BackTop 需要达到的滚动高度 number 400 onClick 点击事件的回调函数 (e: MouseEvent) => void -