ReactJS UI Ant Design BackTop Component

BackTop is a component in Ant Design that provides a button when the user has scrolled through the page to go back to the top of the page without the need to scroll back to the top. It will take the user to the top of the page with a smooth scrolling animation.

Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this BackTop component using the following approach easily.

Syntax:

<BackTop>
      Scroll to Top
</BackTop>

BackTop Property:

• duration: This property specify the time to return to top（ms）
• target: This property specifies the scrollable area dom node
• visibilityHeight: This property specifies that BackTop button will not show until the scroll height reaches this value
• onClick: This property specifies a callback function, which can be executed when you click the button

Creating React Application and Installing Module:

• Step 1: Create a React application using the following command.

  npx create-react-app demo

• Step 2: After creating your project folder i.e. demo, move to it using the following command.

  cd demo

• Step 3: After creating the ReactJS application, Install the antd library using the following command.

  npm install antd

Project Structure:

Example: Now write the following code in filename App.js.

app.js

import { BackTop } from "antd";
import "./App.css";
import "antd/dist/antd.css";

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

function App() {
  return (
    <div className="App">
      <div style={{ height: "600vh",
                    padding: 8,
                    margin: "auto 20rem" }}>
        <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>
    </div>
  );
}

export default App;

Running the application: Run the application by using the following command.

npm start

Output: Now open your browser and go to http://localhost:3000/, You will see the following output.

Reference: https://ant.design/components/back-top/