如何设置回到顶部按钮在滚动超过视口高度时激活？

你可以用window.innerHeight动态获取当前浏览器的视口高度，替换掉硬编码的800数值，实现滚动超过视口高度时触发按钮显示的需求。同时优化逻辑和事件绑定方式，避免重复绑定与冗余判断：

修改后的完整代码 #

import { useState, useEffect } from 'react';
import { useScrollDirection } from '你的滚动方向钩子路径';
import { useScrollPosition } from '你的滚动位置钩子路径';

const YourComponent = () => {
  const { scrollDirection } = useScrollDirection();
  const { scrollPosition } = useScrollPosition();
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisible = () => {
    // 滚动到顶部时隐藏按钮
    if (scrollPosition === 0) {
      setIsVisible(false);
      return;
    }
    // 滚动距离超过视口高度时显示，否则隐藏
    setIsVisible(scrollPosition > window.innerHeight);
  };

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

  // 用useEffect绑定并清理滚动事件，避免内存泄漏
  useEffect(() => {
    window.addEventListener("scroll", toggleVisible);
    return () => window.removeEventListener("scroll", toggleVisible);
  }, [scrollPosition]);

  return (
    <>
      {isVisible && (
        <button onClick={scrollToTop} style={{ position: 'fixed', bottom: '20px', right: '20px' }}>
          返回顶部
        </button>
      )}
      {/* 你的其他组件内容 */}
    </>
  );
};

export default YourComponent;

关键修改点说明 #

• 用window.innerHeight替代硬编码的800，该值会根据用户浏览器窗口大小动态变化，适配不同设备
• 简化toggleVisible逻辑，直接通过scrollPosition > window.innerHeight判断按钮显示状态，去掉冗余的多分支判断
• 使用useEffect管理滚动事件的绑定与清理，避免组件重复渲染时多次绑定事件导致的性能问题和内存泄漏

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