MUI useScrollTrigger实现ScrollToTop组件不生效问题

两个异常的触发原因如下：

• useScrollTrigger始终返回false：默认配置下useScrollTrigger会判定滚动方向，仅在向下滚动超过阈值时返回true，且未明确指定滚动监听目标时，容易受页面嵌套滚动容器、全局样式重置影响，导致监听的滚动节点和实际滚动节点不匹配，最终返回值不符合预期。
• 点击按钮无法回顶：回顶逻辑仅修改了单个DOM节点的scrollTop值，未兼容不同内核浏览器的滚动挂载节点，且部分场景下按钮z-index层级不足被遮挡，点击事件未实际触发。

1. 修正useScrollTrigger配置 #

调用钩子时传入三个核心配置，关闭滚动方向判定、明确触发阈值、绑定正确的滚动监听目标：

const trigger = useScrollTrigger({
  target: window,
  disableHysteresis: true,
  threshold: 100, // 可根据需求调整触发的滚动像素阈值
});

配置说明：disableHysteresis: true会取消默认的滚动方向校验，只要滚动距离超过阈值就返回true，适配回到顶部按钮的显隐逻辑；target: window明确监听全局页面滚动，避免嵌套容器导致的监听失效。

2. 修复回顶点击逻辑 #

使用浏览器原生兼容的window滚动方法，不要单独修改某一节点的scrollTop：

const handleScrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 不需要平滑滚动可替换为auto，直接跳回顶部
  });
};

3. 调整组件渲染与样式 #

直接通过trigger值控制组件显隐，给按钮设置足够高的层级避免点击遮挡：

import { Fade, Fab, Box } from '@mui/material';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

// 组件内部渲染逻辑
<Fade in={trigger}>
  <Box
    onClick={handleScrollToTop}
    role="presentation"
    sx={{
      position: 'fixed',
      bottom: 24,
      right: 24,
      zIndex: 9999 // 高层级保证按钮不被其他页面元素遮挡
    }}
  >
    <Fab size="small" aria-label="回到顶部">
      <KeyboardArrowUpIcon />
    </Fab>
  </Box>
</Fade>

• 页面垂直滚动距离超过设定的100px阈值后，右下角回到顶部按钮自动淡入显示
• 点击按钮后页面平滑滚动回顶部，回到顶部后按钮自动淡出隐藏

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