semi-design/content/navigation/backtop/index-en-US.md

---

localeCode: en-US order: 34 category: Navigation title: BackTop subTitle: BackTop icon: doc-backtop

brief: The BackTop component is a button used to return to the top of the page.

Demos

How to import

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

Basic Usage

BackTop can be used directly with the default styles.

import React from 'react';
import { BackTop } from '@douyinfe/semi-ui';

class Demo extends React.Component {
    render() {
        return (
            <div>
                <span>Scroll down to see the bottom-right gray button.</span>
                <BackTop />
            </div>
        );
    }
}

Customized Style

The default styles for BackTop component could be overwritten.

import React from 'react';
import { BackTop } from '@douyinfe/semi-ui';
import { IconArrowUp } from '@douyinfe/semi-icons';

class Custom extends React.Component {
    target() {
        return document.querySelector('.scroll-wrapper');
    }

    render() {
        const style = {
            height: 30,
            width: 30,
            borderRadius: '100%',
            backgroundColor: '#0077fa',
            color: '#fff',
            paddingTop: 5,
            bottom: 100,
        };

        return (
            <div>
                <span>
                    Scroll down to see the bottom-right <span style={{ color: '#0077fa' }}>blue circular</span> button.
                </span>
                <BackTop style={style}>
                    <IconArrowUp />
                </BackTop>
            </div>
        );
    }
}

API Reference

Properties	Instructions	type	Default
className	Class name	string	-
duration	Time used to scroll to the top.	number	450
style	Style	CSSProperties	-
target	A function that returns the DOM element to add listener to its scrolling event.	() => any	() => window
visibilityHeight	The scrolling heights to be reached in order to show up BackTop.	number	400
onClick	The callback to onClick event.	(e: MouseEvent) => void	-

Design Tokens