BackTop

Demos

How to import

<script setup lang="ts">
    import { BackTop } from '@fibrous/semi-ui-vue';
</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 setup lang="ts">
    import { BackTop } from '@fibrous/semi-ui-vue';
</script>

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

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 slot and the FloatButton props shape, size, colorful and badge.

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

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

API Reference

Props

Events

Slots

Exposes

class, style and native attributes (such as data-* and aria-*) are passed through attrs and land on the button. click is a declared event, so it shadows a native click listener on the root and is throttled by duration. When target reads a template ref, the ref is already assigned before the parent's mounted hook; a stable target function that returns the element only after mount is not rebound, so remount BackTop. The $el of the component ref is the <button> while visible and a placeholder comment node otherwise.

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