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.

TypeScript
JavaScript
import { BackTop } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <>
    <BackTop />
    Scroll down to see the bottom-right
    <strong className="site-back-top-basic"> gray </strong>
    button.
  </>
);

export default App;
.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.

Note: BackTop expects a element could accept onClick propety as children. If you put a text directly as children the component will not function properly.

TypeScript
JavaScript
import { BackTop } from 'infrad';
import React from 'react';

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

const App: React.FC = () => (
  <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>
);

export default App;

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
duration	Time to return to top（ms）	number	450	4.4.0
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	-