回到顶部

代码演示

如何引入

<script lang="ts">
    import { BackTop } from '@fibrae/semi-ui-svelte';
</script>

基本用法

BackTop 是一个 FloatButton，滚动超过 visibilityHeight 后出现，点击后把 target 滚动到顶部。默认显示回到顶部图标，可访问名称默认取自语言包（简体中文为「回到顶部」），可以通过 aria-label 覆盖。

<script lang="ts">
    import { BackTop } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <span>Scroll down to see the bottom-right gray button.</span>
    <BackTop aria-label="Back to top" />
</div>

自定义样式

BackTop 默认距离底部 50px、距离右侧 100px（RTL 下为左侧），可以用 style 覆盖。

外观通过 FloatButton 的 icon snippet 与 shape、size、colorful、badge 定制；style 只接受字符串。

<script lang="ts">
    import { IconArrowUp } from '@fibrae/semi-icons-svelte';
    import { BackTop } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <span>向下滚动，右下角会出现一个方形的多彩按钮。</span>
    <BackTop aria-label="回到顶部" colorful shape="square" size="large" style="bottom: 100px">
        {#snippet icon()}
            <IconArrowUp />
        {/snippet}
    </BackTop>
</div>

API 参考

Props

class、style（字符串）与原生属性（如 data-*、aria-*）落在按钮上。点击回调是原生的 onclick，按 duration 节流，overrideDefaultProps.BackTop 不能设置它。children 与 icon、badgeCount 都是 snippet。

target 在挂载后调用一次，此时读取父容器的元素引用能取到元素；稳定的 target 函数晚于挂载才返回元素时，需要重新挂载 BackTop。

Accessibility

ARIA

• BackTop 渲染为单个原生按钮 <button type="button">，读屏软件读作按钮
• 可访问名称取自 aria-label；没有时，传入了按钮内容则取按钮内容，否则取语言包中的默认名称（简体中文为「回到顶部」）
• children（Vue 中为默认插槽，Svelte 中为 snippet）是按钮内的静态内容，会成为按钮名称的一部分；按钮内不能嵌套可交互元素

键盘和焦点

• 按钮显示后可以用 Tab 及 Shift + Tab 聚焦，聚焦时按 Enter 或 Space 滚动到顶部
• 键盘聚焦时显示聚焦轮廓

设计变量