backtotop.tsx

import React, {useState} from 'react';


const ScrollButton = () =>{

  //Controlamos con un Hook si debemos mostrar el botón
  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 (
    <div>
    <i className="fa fa-arrow-circle-up fa-3x scrollTop" onClick={scrollTop} style={{display: showScroll ? 'flex' : 'none'}}/>
    </div>
  );
}

export default ScrollButton;