react函数组件根据监听滚动条来显示隐藏按钮

函数式组件也可以实现根据监听滚动条来显示隐藏按钮的功能。相较于类组件，函数式组件的实现方式有些不同。具体实现步骤如下：

1. 使用`useState` hook来定义`showButton`状态和更新`showButton`状态的函数。
2. 使用`useEffect` hook来注册和注销滚动事件监听。
3. 在监听回调函数中，获取当前滚动条的位置，判断是否需要显示按钮，并调用`setShowButton`函数来更新`showButton`状态。

示例代码如下：

import React, { useState, useEffect } from 'react';

function ScrollButton() {
  const [showButton, setShowButton] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      if (scrollTop > 100 && !showButton) {
        setShowButton(true);
      } else if (scrollTop <= 100 && showButton) {
        setShowButton(false);
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [showButton]);

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

  return (
    <div>
      {showButton && <button onClick={handleClick}>回到顶部</button>}
    </div>
  );
}

export default ScrollButton;

在上面的代码中，当滚动条滚动距离大于100时，显示按钮；当滚动条滚动距离小于等于100时，隐藏按钮。你可以根据实际需求来调整这个值。在点击按钮时，使用`window.scrollTo`方法来回到页面顶部。