BackTop

Demos

How to import

import { BackTop } from '@fibrous/semi-ui-solid';

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.

import { BackTop } from '@fibrous/semi-ui-solid';

export default function BackTopDemo() {
    return (
        <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 FloatButton props icon, shape, size, colorful and badge.

import { IconArrowUp } from '@fibrous/semi-icons-solid';
import { BackTop } from '@fibrous/semi-ui-solid';

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

API Reference

Props

class, style, ref and native attributes (such as data-* and aria-*) land on the button, and onClick is throttled by duration.

target is called once after mount, when the ref 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) 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