Wed Mar 29 2023

Scroll to top floating button in React

I recently posted a tutorial on how to create a tab filter component in react and I thought I would continue on that path and show how we can create a scroll to top button in React as well, which are floating in the bottom right corner of our screen. This particular feature is quite neat to have, especially if your page has a lot of scrolling.

Result

After this guide, we will have a result that looks like this:

result

Prerequisites

React application set up. Quick guide how to set one up
I am using an icon from Google material icons. Find it here

I will use .tsx and sass, but jsx and css will work just as fine.

Write our React component

Let's start with writing our ScrollTop component.

import { useState } from "react";
// if using css, import should look like this: import "./ScrollTop.css";
import style from "./ScrollTop.module.scss";

const SCROLL_BREAKPOINT = 500;

export const ScrollTop = () => {
  const [isVisible, setVisible] = useState(false);

  const scrollHandler = () => {
    if (window.scrollY > SCROLL_BREAKPOINT && !isVisible) {
      setVisible(true);
    } else if (window.scrollY <= SCROLL_BREAKPOINT && isVisible) {
      setVisible(false);
    }
  };

  const scrollToTop = () => window.scrollTo(0, 0);
  window.addEventListener("scroll", scrollHandler);

  if (!isVisible) {
    return null;
  }

  // If using css, it should look like this e.g className="scrollTop"
  return (
    <div className={style.scrollTop} onClick={scrollToTop}>
      <img className={style.icon} alt="arrow-up" src="/icons/single-up.svg" />
    </div>
  );
};

All right. That is it for our component.

Some notes

SCROLL_BREAKPOINT is a value I basically came up with myself, I thought 500px feels good to start showing the button. You can experiment with this value youself and find what works best for you.
scrollHandler() is the function that decides when to switch states of the visibility. Basically, if the scroll value is higher than breakpoint, we show the button, and if less, we hide it.
scrollToTop() will call the global function to scroll us to the top (x = 0 y = 0).
window.addEventListener() will activate our component to listen to all scroll events

Apply css/sass

.scrollTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background-color: #0069c4;
  border-radius: 50px;
  cursor: pointer;
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

  @media only screen and (max-width: 600px) {
    display: flex;
  }

  .icon {
    height: 32px;
    width: 32px;
  }
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Cool. Now we are ready to include this bad boy in our project.

Some notes

I am using an animation to make the transition a bit smoother when it pops up
I set display: none; for desktop, and for mobile we set it to display: flex;. So on desktop, we won't show any button. If you want to change this, just change display: none; to display: flex;

Pro tip :)

In your index css, set this value and you will get a really smooth scrolling experience.

html {
  scroll-behavior: smooth;
}

Add the component

In your App.jsx or index.jsx you can just call the component, since it is position: fixed; it shouldn't matter where you put it. It should show in the button right corner when you scroll pass your breakpoint value (500px down in this guide).

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
    <ScrollTop />
  </React.StrictMode>
);