How to Scroll to Top in React with a Button Component - JavaScript

Introduction

The "scroll-to-top" feature is an excellent addition to any website that forces visitors to scroll a long distance before reaching the bottom of the page, since it becomes quite annoying to return back to the top.

In this hands-on guide, we will learn how to make a React button that allows users to "scroll to the top." We'll utilize React hooks and make this a reusable component. At the conclusion of this article, we'll look at how to do it with the react-scroll-to-top library.

Note: The source code is available in our GitHub repository, and to see a live demo of the application, visit this Vercel App.

        <h3 id="usingreactandreacthooks">Using React and React Hooks</h3>

For simple functionality like this, you can easily code a solution from scratch, rather than installing a library. Creating functionality like this from scratch allows for more customization and an appreciation for what libraries abstract away!

Getting Started

We'll be making a separate component, producing a reusable piece of code that can be spread out between your projects. We'll additionally be using an arrow icon from react-icons for this guide, though, any icon that works for you will work just as well.

Installing react-icons

To use react-icons, you have to install the module. You can install react-icons with:

$ npm i react-icons

Scroll to Top in React

Let's import the library and the icon itself, and set them up as a component:

import React from 'react';
import { FaAngleUp } from 'react-icons/fa';

import './index.css';

const ScrollToTop = () => {
    return (

    );
};
export default ScrollToTop;

Let's also apply some style to the icon and add a movement animation in index.css:

.top-to-btm{
  position: relative;
}
.icon-position{
  position: fixed;
  bottom: 40px;
  right: 25px;
  z-index: 20;
}
.icon-style{
  background-color: #551B54;
  border: 2px solid #fff;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  color: #fff;
  cursor: pointer;
  animation: movebtn 3s ease-in-out infinite;
  transition: all .5s ease-in-out;
}
.icon-style:hover{
  animation: none;
  background: #fff;
  color: #551B54;
  border: 2px solid #551B54;
}
@keyframes movebtn {
  0%{
    transform: translateY(0px);
  }
  25%{
    transform: translateY(20px);
  }
  50%{
    transform: translateY(0px);
  }
  75%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(0px);
  }
}

Great! Now we can implement the logic that takes the user back up to the top of the page.

Implementing the Logic

We'll be using the useState() and useEffect() hooks to allow us to develop the functionality easily and quickly.

import React, { useState, useEffect } from 'react';

The next step is to create a state and set it to false by default; this state will control the visibility of the "scroll-to-top" button, since we only want the button to appear after the user has scrolled down a bit and to vanish after the user has scrolled all the way to the top:

const [showTopBtn, setShowTopBtn] = useState(false);

At this point, we'll utilize the useEffect() hook to build the logic that determines when we want the button to appear and when we want it to disappear.

Note: The Effect Hook is active by default after the initial render and each time the state is updated. It is used to conduct an effect whenever the state changes, as the name implies.

        Let's set the state to true after the user has scrolled down by 400 pixels:

useEffect(() => {
    window.addEventListener('scroll', () => {
        if (window.scrollY > 400) {
            setShowTopBtn(true);
        } else {
            setShowTopBtn(false);
        }
    });
}, []);

We added an EventListener to the window to listen for a scroll and then run a function when the conditional within the listener returns true. If the vertical scroll position is more than 400 (as determined by you), the function sets the showTopBtn state to true; otherwise, it sets it to false. Remember that this will constantly run when you scroll through the webpage, and will thus update the button to stop showing when someone's scrolled back up to the top of the page. The final functionality we'll want to implement is handling the click event! Once the user clicks on the button, we'll want to scroll them back to the top. Thankfully - the window object has a dedicated scrollTo() method exactly for this! Let's wrap it around with a function we'll call when a user clicks the button:

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

Note: window.scrollTo() also accepts a behavior parameter which is used to specify whether the scrolling should be animated smoothly (smooth), or happen instantly in a single jump (auto, the default value).

        Finally, let's add an onclick() listener to the button in our markup, hooking it up to the goToTop() method:

import React, { useState, useEffect } from "react";
import { FaAngleUp } from "react-icons/fa";

import "./index.css";

const ScrollToTop = () => {
    const [showTopBtn, setShowTopBtn] = useState(false);
    useEffect(() => {
        window.addEventListener("scroll", () => {
            if (window.scrollY > 400) {
                setShowTopBtn(true);
            } else {
                setShowTopBtn(false);
            }
        });
    }, []);
    const goToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };
    return (
        <div classname="top-to-btm">
            {" "}
            {showTopBtn && (
                <faangleup classname="icon-position icon-style" onclick="{goToTop}">
            )}{" "}
        </faangleup></div>
    );
};
export default ScrollToTop;

That's it! The component can now be imported into a new page and used. In the App.js file, let's import it:

import ScrollToTop from './ScrollToTop';

function App() {
    return (

    );
}

export default App;

Note: For styling this page, refer to our GitHub repository, and to see a live demo of the application, visit this Vercel App.

        <h3 id="usingthereactscrolltotoplibrary">Using the <em>react-scroll-to-top</em> Library</h3>

The react-scroll-to-top library is a lightweight, customizable button component, that scrolls to the top of the page when clicked. This component is analogous to our own, but you don't have to code it up yourself. Naturally, it only appears once you've scrolled down enough that it makes sense for it to appear.

Installing react-scroll-to-top

Run this command in your terminal:

$ npm i react-scroll-to-top

Scroll to Top with react-scroll-to-top

To use the component, we import react-scroll-to-top and use it as we've used our own: Import and then include <ScrollToTop /> anywhere in your render/return function:

import ScrollToTop from "react-scroll-to-top";

function App() {
    return (

    );
}

export default App;

The library is customizable as well! There's a fair bit of props you can tweak for different effects. This has so many props, and they are all listed below with their description and the type of data they take in:

Conclusion

In this guide, we have learnt how to create a reusable component, from scratch, to perform the scroll-to-top operation easily. This component is easily transferable between projects! Just transfer the associated files and import it into a new page. Finally - we've taken a look at a popular library that takes care of this for us, as well as the props associated with customizing it.

TAGS :