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 (

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) {
      } else {
  }, []);

  const scrollToTop = () => {
      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">

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 />

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

How to Build Scroll to Top and Bottom in React Js


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.