BackTop
回到顶部悬浮按钮:滚动超过 visibilityHeight(默认 400px) 时显现、点击平滑缓动(easeInOutCubic, duration 默认 450ms)滚回顶部;默认监听 window,可经 target 指定自定义滚动容器;默认渲染 IconButton(theme="light") + IconChevronUp,可用 children 完全自定义。严格对齐 Semi。
如何引入
import { BackTop } from '@chenzy-design/svelte';基本用法
BackTop 预设了基本的返回按钮,可以直接调用
向下滚动容器,右下角出现灰色返回按钮。
Scroll down to see the bottom-right gray button.
自定义样式
BackTop 预设了默认样式,可以覆盖为自定义外观
向下滚动容器,右下角出现蓝色圆形按钮。
Scroll down to see the bottom-right blue circular button.
API 参考
BackTop
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
target | 返回需要监听其滚动事件的元素对应 DOM 元素的函数(对齐 Semi) | () => HTMLElement | Window | null | () => window |
visibilityHeight | 出现 BackTop 需要达到的滚动高度(px) | number | 400 |
duration | 滚动到顶部的时间(ms) | number | 450 |
onClick | 点击事件的回调函数 | (e: MouseEvent) => void | undefined |
children | 自定义按钮内容(替换默认 IconButton) | Snippet | undefined |
style | 根节点内联样式 | string | '' |
class | 根节点类名 | string | '' |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onClick | — | 按钮点击 |
Slots
| 名称 | 说明 |
|---|---|
children | 自定义按钮内容,替换默认 IconButton |
Accessibility
- 对齐 Semi:外层 div.cd-back-top 为可点击容器,真实按钮语义/键盘可聚焦/可访问名(locale BackTop.ariaLabel)由内部 IconButton(theme="light") 承担;不可见时不在 DOM。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-backtop-z | var(--cd-z-affix) | 按钮 z-index(对齐 Semi $z-backtop: 10) |