BackTop

Demos

How to import

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

Basic Usage

BackTop is a FloatButton that appears once target scrolls past visibilityHeight and scrolls it back to the top when clicked. It shows a back-to-top icon by default, and its accessible name comes from the locale by default ('Back to top' in English), which aria-label can override.

<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>

Customized Style

BackTop sits 50px from the bottom and 100px from the right (the left in RTL) by default, which style can override.

Its look is customized with the icon snippet and the FloatButton props shape, size, colorful and badge; style only accepts a string.

<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 Reference

Props

class, style (a string) and native attributes (such as data-* and aria-*) land on the button. The click callback is the native onclick, throttled by duration, and overrideDefaultProps.BackTop cannot set it. children, icon and badgeCount are snippets.

target is called once after mount, when the element reference of a parent container is already readable; a stable target function that returns the element only after mount needs BackTop remounted.

Accessibility

ARIA

• BackTop renders a single native <button type="button">, which screen readers announce as a button
• The accessible name comes from aria-label; without it, it comes from the button content when content is passed, and otherwise from the locale's default name ('Back to top' in English)
• children (the default slot in Vue, a snippet in Svelte) is static content of the button and becomes part of its name; the button must not contain interactive elements

Keyboard and focus

• Once visible, the button is reached with Tab and Shift + Tab, and Enter or Space scrolls to the top
• A focus outline is shown on keyboard focus

Design Tokens