Create a Scroll to Top Arrow Using React Hooks

Previously, I wrote an article about implementing a custom scroll top arrow using JavaScrip Recently, I needed to implement one in a React app and my first thought was to manage the arrow’s visibility in the parent component’s state.

While this did work, it was creating unnecessary state changes and re-rendered the entire parent component when all I wanted to do was update whether or not the arrow should be visible.

You could give the arrow component its own state values and toggle its visibility, but by using React Hooks, we can create a functional ScrollTopArrow component with minimal code and unobtrusive state reliance and effect. The visibility can be managed by adding a scroll event listener and implementing useState. See below:

const [showScroll, setShowScroll] = useState(false)
const checkScrollTop = () => {    
   if (!showScroll && window.pageYOffset > 400){
      setShowScroll(true)    
   } else if (showScroll && window.pageYOffset <= 400){
      setShowScroll(false)    
   }  
};
window.addEventListener('scroll', checkScrollTop)

scrolltoparrow.js
While using traditional DOM manipulation in React is considered an anti-pattern, my justification for its use in this case is because we are not using traditional DOM manipulation to mutate data or change state in a significant way. All we are doing is adding a listener to determine whether or not to show an element. We are also not using DOM manipulation to change the element class or style.

Now that we have the visibility toggle logic in place, we can begin to actually build out our component and apply styles. If you want to create your own arrow element using HTML and CSS, that’s totally fine. But being a bit lazy, I decided to import an icon from react-icons:

import {FaArrowCircleUp} from 'react-icons/fa';

All of the icon’s style is maintained in App.css except for the display, which will be driven by the showScroll hook state property. If showScroll is true, show the arrow. If it is false, hide the arrow.

<FaArrowCircleUp 
   className="scrollTop" 
   onClick={scrollTop} 
   style={{height: 40, display: showScroll ? 'flex' : 'none'}}
/>

Finally, here is the code for the scrollTop function:

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

We can use the [scrollTo](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) function, which is native to the window interface, and pass the parameters for top and behavior. Our top value is 0 because all we want this arrow to do is scroll the window back to the top of the page. Pretty straightforward. And for the behavior, I personally prefer smooth because it gives the scroll effect a less jarring transition.

Below is the full code for the ScrollTopArrow component, along with App.css:

App {
  text-align: center;
  height: 5000px;
}

.scrollTop {
  position: fixed; 
  width: 100%;
  bottom: 20px;
  align-items: center;
  height: 20px;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
  animation: fadeIn 0.3s;
  transition: opacity 0.4s;
  opacity: 0.5;
}

.scrollTop:hover{
  opacity: 1;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

App.css

import React, {useState} from 'react';
import {FaArrowCircleUp} from 'react-icons/fa';
import '../App.css';


const ScrollArrow = () =>{

  const [showScroll, setShowScroll] = useState(false)

  const checkScrollTop = () => {
    if (!showScroll && window.pageYOffset > 400){
      setShowScroll(true)
    } else if (showScroll && window.pageYOffset <= 400){
      setShowScroll(false)
    }
  };

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

  window.addEventListener('scroll', checkScrollTop)

  return (
        <FaArrowCircleUp className="scrollTop" onClick={scrollTop} style={{height: 40, display: showScroll ? 'flex' : 'none'}}/>
  );
}

export default ScrollArrow;

ScrollArrow.js

Now all you have to do is import ScrollTopArrow in a component of your choosing and you’re all set. To test it out, I imported ScrollTopArrow into my App component and gave App a height of 5,000px. Below is what the final product should yield:

The source code for the full React application can be found on GitHub.

#reactjs #javascript