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)number400
duration滚动到顶部的时间(ms)number450
onClick点击事件的回调函数(e: MouseEvent) => voidundefined
children自定义按钮内容(替换默认 IconButton)Snippetundefined
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)