React项目Back to top返回顶部按钮点击无法回到顶部问题

核心原因 #

赋值后scrollTop小幅下降、无法直接回到顶部的问题，本质由两类原因导致：

1. 没有命中实际承载页面滚动的容器，给非滚动容器赋值scrollTop不会生效
2. 全局配置的平滑滚动规则拦截了原生滚动赋值行为，触发滚动动画后和按钮显隐监听逻辑冲突，导致滚动过程被打断

修复方案 #

• 兼容双滚动容器
  不同浏览器的滚动根容器存在差异，部分浏览器滚动偏移挂载在body上，部分挂载在documentElement上，赋值时需要同时设置两个容器的scrollTop：

  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
  

• 绕过平滑滚动拦截
  如果你在全局CSS中设置了html { scroll-behavior: smooth; }，直接赋值scrollTop会触发平滑滚动动画，不会瞬间跳转至顶部。如果此时按钮显隐逻辑是监听scroll事件、根据滚动阈值切换visible状态，滚动动画过程中触发的状态变更会打断滚动流程，就会出现scrollTop每次小幅下降的异常。
  优先使用原生滚动API，强制指定瞬时滚动，不受全局平滑滚动配置影响：

  <button 
    className='button-arrow' 
    disabled={!visible} 
    style={{display: visible ? 'block' : 'none'}} 
    onClick={() => {
      // 现代浏览器支持的配置式滚动，强制瞬时跳转
      window.scrollTo({
        top: 0,
        behavior: 'instant'
      });
      // 兼容老版本浏览器的兜底赋值
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    }}
  >
    <FaArrowUp size={20} color='#fff'/>
  </button>
  

• 排查自定义滚动场景
  如果项目中使用了自定义滚动库，或者给页面根级容器设置了overflow: auto/scroll自行实现滚动，此时浏览器默认的documentElement、body都不是滚动容器，你需要找到实际设置了overflow属性的滚动容器元素，将它的scrollTop赋值为0即可。

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