ScrollToTopArrow

ScrollToTopArrow.js

export const ScrollTopArrowComponent = () => {
  // Track whether the scroll arrow is needed.
  const [showScroll, setShowScroll] = useState(null);
  // Check the scroll state, re-memoize when scroll state changes.
  const checkScrollTop = useCallback(
    () => {
      const headerHeight = 400;

      if (!showScroll && window.pageYOffset > headerHeight) {
        setShowScroll(true);
      } else if (showScroll && window.pageYOffset <= headerHeight) {
        setShowScroll(false);
      }
    },
    [showScroll],
  );
  // Add/remove the event listener when the component is unmounted or the scroll state has changed.
  useEffect(
    () => {
      window.addEventListener('scroll', checkScrollTop);
      return () => window.removeEventListener('scroll', checkScrollTop);
    },
    [checkScrollTop],
  );

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

  return (
    <div className="scrollTop">
      <button
        onClick={scrollTop}
        style={{ display: showScroll ? 'flex' : 'none' }}
      >
        <span className="fa fa-chevron-up" />
      </button>
    </div>
  );
};

Matthew Croak wrote a great article. Just needed a quick edit.

FYI: This snippet was part of a production code base. It was edited for the gist and has not been tested.

Matthew Croak wrote a great article. Just needed a quick edit.

FYI: This snippet was part of a production code base. It was edited for the gist and has not been tested.

It seems to work fine. Thank you.