React回到顶部按钮：滚动行为控制显示隐藏需求求助

根据你的需求，我们需要修改原有代码，加入滚动方向判断和滚动停止后的延迟检测逻辑，以下是完整的实现代码：

import { useState, useEffect } from 'react';
import Image from 'next/image'; // 假设你使用的是Next.js的Image组件

export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);
  const [lastScrollPosition, setLastScrollPosition] = useState(0);
  const [scrollTimer, setScrollTimer] = useState(null);

  // 回到顶部逻辑
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  useEffect(() => {
    const toggleVisibility = () => {
      const currentScrollPos = window.pageYOffset;
      // 清理之前的定时器，避免滚动过程中多次触发停止逻辑
      if (scrollTimer) clearTimeout(scrollTimer);

      // 判断滚动方向
      const isScrollingDown = currentScrollPos > lastScrollPosition;

      if (isScrollingDown) {
        // 向下滚动且超过500px时显示按钮
        setIsVisible(currentScrollPos > 500);
      } else {
        // 向上滚动时直接隐藏按钮
        setIsVisible(false);
      }

      // 更新上一次滚动位置
      setLastScrollPosition(currentScrollPos);

      // 设置定时器，用户停止滚动500ms后执行最终判断
      const timer = setTimeout(() => {
        setIsVisible(window.pageYOffset > 500);
      }, 500);
      setScrollTimer(timer);
    };

    window.addEventListener("scroll", toggleVisibility);

    // 组件卸载时清理事件监听器和定时器
    return () => {
      window.removeEventListener("scroll", toggleVisibility);
      if (scrollTimer) clearTimeout(scrollTimer);
    };
  }, [lastScrollPosition, scrollTimer]);

  return (
    <div className="scroll-to-top">
      {isVisible && (
        <div className="top" onClick={scrollToTop}>
          <div className="top_img_holder">
            <Image src="/uparrow.png" width="16" height="12" alt="回到顶部" />
          </div>
        </div>
      )}
    </div>
  );
}

关键改动说明： #

• 新增状态：
  • lastScrollPosition：记录上一次滚动的Y轴位置，用于区分向上/向下滚动方向
  • scrollTimer：存储定时器ID，确保滚动过程中只会保留最新的停止检测定时器
• 滚动方向判断：通过对比当前滚动位置和上一次位置，判断用户是向上还是向下滚动
• 滚动停止检测：使用setTimeout实现延迟判断，用户停止滚动500ms后，根据当前滚动位置决定是否显示按钮
• 副作用清理：组件卸载时不仅移除滚动事件监听器，还清理定时器，避免内存泄漏

内容的提问来源于stack exchange，提问作者Ahsan Roomi