代码演示

如何引入

import { BackTop } from '@kousum/semi-ui-vue';

基本用法

BackTop 预设了基本的返回按钮，可以直接调用。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { BackTop } from '@kousum/semi-ui-vue';

2

​

3

export default ()=>(

4

  <div style={{height: '1900px'}}>

5

    <span>Scroll down to see the bottom-right gray button.</span>

6

    <BackTop />

7

  </div>

8

)

Show Error

Auto Save

自定义样式

BackTop 预设了默认样式，包括：距离底部 50px，距离右侧 100px，box-sizing 为 border-box，内容水平居中。样式可以覆盖。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

28

 

1

import { BackTop } from '@kousum/semi-ui-vue';

2

import { IconArrowUp } from '@kousum/semi-icons-vue';

3

​

4

export default ()=>{

5

​

6

  const style = {

7

    display: 'flex',

8

    alignItems: 'center',

9

    justifyContent: 'center',

10

    height: '30px',

11

    width: '30px',

12

    borderRadius: '100%',

13

    backgroundColor: '#0077fa',

14

    color: '#fff',

15

    bottom: '100px',

16

  };

17

​

18

  return (

19

    <div style={{height: '1900px'}}>

20

                <span>

21

                    Scroll down to see the bottom-right <span style={{ color: '#0077fa' }}>blue circular</span> button.

22

                </span>

23

      <BackTop style={style}>

24

        <IconArrowUp />

25

      </BackTop>

26

    </div>

27

  );

28

}

Show Error

Auto Save

API 参考

属性	说明	类型	默认值
className	类名	string	-
duration	滚动到顶部的时间	number	450
style	样式名	CSSProperties	-
target	返回值为需要监听其滚动事件的元素对应 DOM 元素的函数	() => any	() => window
visibilityHeight	出现 BackTop 需要达到的滚动高度	number	400
onClick	点击事件的回调函数	(e: MouseEvent) => void	-

设计变量

other

spacing

变量	默认值	用法
$z-backtop	10	返回顶部 z-index

显示第 1 条-第 1 条，共 1 条

• 1

变量	默认值	用法
$spacing-backtop-right	100px	返回顶部距离右侧距离
$spacing-backtop-bottom	50px	返回顶部距离底侧距离

显示第 1 条-第 2 条，共 2 条

• 1