DEV Community

React Component to Smooth Scroll to the Top

Pranav Birajdar on March 17, 2021

It's kinda rare to find a smooth scrolling button that takes you to the top of the page on modern blogging websites, especially the ones that are a...

Read full post

𒎏Wii 🏳️‍⚧️ • Mar 17 '21

I had to build a similar thing a while ago, but without any framework; ended up with much less code by simply adding a scroll event handler that toggles a top class on the body element. The CSS then just has a rule like .top .scroll-to-top { opacity: 1 }

Pranav Birajdar • Mar 17 '21

Damn! That's awesome. Do you have a demo by any chance?

𒎏Wii 🏳️‍⚧️ • Mar 17 '21

cc-entrance.comcard.de Ignore the fact that it's in German 😁

Also there's a few additional effects other than just fading in and out, which obviously makes the CSS a bit more complex.

Pranav Birajdar • Mar 17 '21 • Edited

This looks so good! I just looked at the event code and the underlying function is almost the same. It's just less code due to being written in pure HTML and CSS I reckon. Correct me if I am wrong!

𒎏Wii 🏳️‍⚧️ • Mar 17 '21

Yea, I don't think the way I do it is all that different from yours, the only detail that really changes is that I use more of the CSS cascade in an attempt to make it more "generic" :D

Andrew Bone • Mar 17 '21

This is pretty cool and a great way to get people up and running fast there's one minor change I'd make though.

import { useEffect, useState } from "react";

export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

  // Top: 0 takes us all the way back to the top of the page
  // Behavior: smooth keeps it smooth!
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  useEffect(() => {
    // Button is displayed after scrolling for 500 pixels
    const toggleVisibility = () => {
      if (window.pageYOffset > 500) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener("scroll", toggleVisibility);

    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

  return (
    <div className="scroll-to-top">
      {isVisible && (
        <div onClick={scrollToTop}>
          <h3>Go up!</h3>
        </div>
      )}
    </div>
  );
}

By moving the function into the useEffect it is only declared once rather than on every draw. Also by adding a return to that same useEffect we can stop listening if the component is ever unmounted.

As an interesting side point you could look into using IntersectionObserver, with a scroll event fallback, if you wanted to improve on performance, but I don't think this would really need it 😉

Pranav Birajdar • Mar 17 '21

Thank you for pointing out the cleanup for useEffect. I always tend to forget that. I had not considered IntersectionObserver since I didn't know there was a performance hit, but I will certainly look into it!

Bramus! • Mar 18 '21

You don't need JS for this, as you achieve this with only CSS.

html {
  scroll-behavior: smooth;
}

☝️ If you now link to #top, your browser will smoothscroll to the top of the page (you don't even need an anchor/element with that name)

DONE. 😱

(Not supported in Safari though — Meh 😕)

Trong Duong • Mar 17 '21 • Edited

window.scrollTo({
      top: 0,
      behavior: "smooth"
    });

not working on safari browser. can u fix it?

Pranav Birajdar • Mar 17 '21

Since I use Chrome and Firefox, I didn't know it doesn't work on Safari.

This post on Stack Overflow has some suggestions you might find helpful.
stackoverflow.com/questions/560112...

Trong Duong • Mar 17 '21

helpful ! thank bro

Oleh Lutsenko • Mar 17 '21

And of course you want to remove event listener as well? :)

Pranav Birajdar • Mar 17 '21

Just updated the code. Thank you for the comment!

Ricardo Tomasi • Mar 20 '21 • Edited

Just like back navigation, this functionality is in fact so important that every computer already has a physical button for it: the "Home" key, or shift+space / cmd+up if you don't have one.

Duplicating system or browser behaviour is simply introducing UI inconsistency - not a fan of these.

Pranav Birajdar • Mar 20 '21 • Edited

Damn, two decades of using computers and I didn't know a 'Home' key already does that for you! 🤯

Pranav Birajdar • Mar 17 '21

Thank you for the feedback. I tried to get a basic Code Sandbox up and running but Chrome kept on crashing on me.

And the example I used is from my portfolio that I am currently working on. I will post a link as soon as it's live!

Yogini Bende • Mar 17 '21

Simple yet very useful tutorial. Thanks for sharing 🙌

Pranav Birajdar • Mar 17 '21

Glad you found it useful!

Josep Viciana • Mar 17 '21

Nice, but I think hooks should start with use, like useScrollToTop.

Pranav Birajdar • Mar 17 '21

You're right. I think this can be called a Scroll component then! 😅

Ahmed-Mohammed-Badawi • Sep 4 '21

Nice job bro you helped a lot but can u tell me why this line ?

return () => window.removeEventListener("scroll", toggleVisibility);

Pranav Birajdar • Mar 17 '21

codesandbox.io/s/sharp-archimedes-...

Here you go! A very ugly looking demo for time being! :)

Tony Brown • Mar 22 '21

Not very smooth

Pranav Birajdar • Mar 22 '21

The 'smooth' functionality differs from browser to browser I guess. It works great for Chrome and Firefox. Not so sure about Safari though!