How to Scroll Bottom to Top with Button Click in React

Users visit websites to quench their thirst for content consumption. If you add a scroll to top or back to top button on a web page, it surely elevates the user experience.

In this quick tutorial, I will teach you how to create scroll to top functionality in React application using the window.scrollTo() method and custom CSS.

The Window property provides a window.scrollTo() method helps in scrolling to a particular set of coordinates in the document.

It takes x-coord, y-coord, and options parameters that allow setting the scroll bottom to top or back-to-top functionality in React as well as JavaScript-based applications.

Create React Project

We are going to install a new React app, ensure that you have installed node and npm in your system.

npx create-react-app my-react-app

Get into the project directory:

cd my-react-app

Make New Component

Make a separate component; Hence, move into src/ folder, then create features/Home.js file.

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Implement Scroll Bottom to Top

We will be integrating back-to-top button for scrolling bottom to top, thus insert the given code to features/Home.js file.

import { useEffect, useState } from "react";

const Home = () => {
  const [backToTop, setBackToTop] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.pageYOffset > 350) {
        setBackToTop(true);
      } else {
        setBackToTop(false);
      }
    });
  }, []);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <>
      <div className="section section-1"></div>
      <div className="section section-2"></div>
      <div className="section section-3"></div>
      <div className="section section-4"></div>
      <div className="section section-5"></div>

      {backToTop && (
        <button onClick={scrollToTop} className="scrollToTop">
          &#8593;
        </button>
      )}
    </>
  );
};

export default Home;

Style Scroll To Top Component

We have to style the component; paste the given CSS code to App.css file, after adding the code make sure to save the file.

.scrollToTop {
  bottom: 22px;
  right: 22px;
  position: fixed;
  font-size: 120px;
  background: rgb(42, 30, 127);
  color: #ffffff;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  box-shadow: 0 5px 12px #eeeeee;
}

.scrollToTop:hover {
  background: rgb(21, 28, 229);
}

.section {
  height: 82vh;
  width: 100%;
  margin: 35px 0;
}

.section-1 {
  background: rgb(255, 0, 208);
}

.section-2 {
  background: rgb(4, 158, 205);
}

.section-3 {
  background: rgb(239, 224, 11);
}

.section-4 {
  background: rgb(130, 2, 227);
}

.section-5 {
  background: rgb(245, 76, 19);
}

Update App Component

Ultimately, we have to serve the Home component through App.js file, hence add the suggested code to the global component.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Home from "./features/Home";

function App() {
  return (
    <div className="container mt-5">
      <Home />
    </div>
  );
}

export default App;

Run App on Browser

Head over to console, from there you should execute the following command to run the app using the given URL.

npm start
http://localhost:3000

How to Build Scroll to Top and Bottom in React Js

Conclusion

A back-to-top button allows users to go to the top part of the page where they started scrolling the web page.

Eventually, In this tutorial, we have learned how to add a smooth back-to-top button in React application. Not just that, we have also seen how to create a scroll to top button with arrow in React functional component.