BackTop

BackTop makes it easy to go back to the top of the page.

When To Use#

When the page content is very long.
When you need to go back to the top very frequently in order to view the contents.

Examples

Scroll down to see the bottom-right gray button.

Basic

The most basic usage.

import { BackTop } from 'antd';

ReactDOM.render(
  <>
    <BackTop />
    Scroll down to see the bottom-right
    <strong className="site-back-top-basic"> gray </strong>
    button.
  </>,
  mountNode,
);
.site-back-top-basic {
  color: rgba(64, 64, 64, 0.6);
}

Custom style

You can customize the style of the button, just note the size limit: no more than 40px * 40px.

import { BackTop } from 'antd';

const style = {
  height: 40,
  width: 40,
  lineHeight: '40px',
  borderRadius: 4,
  backgroundColor: '#1088e9',
  color: '#fff',
  textAlign: 'center',
  fontSize: 14,
};

ReactDOM.render(
  <div style={{ height: '600vh', padding: 8 }}>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <BackTop>
      <div style={style}>UP</div>
    </BackTop>
  </div>,
  mountNode,
);

API#

The distance to the bottom is set to 50px by default, which is overridable.
If you decide to use custom styles, please note the size limit: no more than 40px * 40px.

Property	Description	Type	Default	Version
target	Specifies the scrollable area dom node	() => HTMLElement	() => window
visibilityHeight	The BackTop button will not show until the scroll height reaches this value	number	400
onClick	A callback function, which can be executed when you click the button	function	-
duration	Time to return to top（ms）	number	450	4.4.0