Open In App
Related Articles

ReactJS UI Ant Design BackTop Component

Improve Article
Save Article
Like Article

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.


      Scroll to Top

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.


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>
          <div style={style}>UP</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.


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 23 Mar, 2021
Like Article
Save Article
Similar Reads
Complete Tutorials