代码演示
如何引入
import { BackTop } from '@chenzy-design/svelte';基本用法
BackTop 预设了基本的返回按钮，可以直接调用。
向下滚动容器，右下角出现灰色返回按钮。
Scroll down to see the bottom-right gray button.
自定义样式
BackTop 预设了默认样式，包括：距离底部 50px、距离右侧 100px、box-sizing 为 border-box、内容水平居中。样式可以覆盖。
向下滚动容器，右下角出现蓝色圆形按钮。
Scroll down to see the bottom-right blue circular button.
API 参考
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| class | 类名 | string | - |
| duration | 滚动到顶部的时间 | number | 450 |
| style | 样式 | string | - |
| target | 返回需要监听其滚动事件的元素对应 DOM 元素的函数 | () => HTMLElement \| Window | () => window |
| visibilityHeight | 出现 BackTop 需要达到的滚动高度 | number | 400 |
| onClick | 点击事件的回调函数 | (e: MouseEvent) => void | - |
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --cd-backtop-z | var(--cd-z-affix) | 按钮 z-index（对齐 Semi $z-backtop: 10） |
显示第 1 条-第 1 条，共 1 条
- 1