react函数组件返回顶部按钮显示隐藏

你可以使用 React Hooks 来实现返回顶部按钮的显示和隐藏。具体实现步骤如下：

1. 使用 useState Hook 来定义一个状态变量，用于表示返回顶部按钮是否显示。

const [showBackToTopButton, setShowBackToTopButton] = useState(false);

2. 在组件中添加滚动事件监听器，当滚动距离超过一定值时，设置返回顶部按钮为显示状态。

useEffect(() => {
  const handleScroll = () => {
    if (window.pageYOffset > 100) {
      setShowBackToTopButton(true);
    } else {
      setShowBackToTopButton(false);
    }
  };
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

3. 在组件中添加返回顶部按钮，并根据状态变量来控制其显示和隐藏。

{showBackToTopButton && (
  <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
    返回顶部
  </button>
)}

这样就可以实现一个简单的返回顶部按钮，并且能够根据用户的滚动行为来动态地显示和隐藏。