Docusaurus v2 路由切换时无法滚动至顶部问题

针对Chrome中首次点击DocSidebar导航条目不滚顶、第二次正常的问题，常见原因及处理方式如下：

• 浏览器滚动恢复机制干扰
  Chrome默认会保留页面的滚动位置，首次跳转新页面时，浏览器可能误将滚动状态恢复为之前页面的位置，第二次跳转时该缓存已更新，因此表现正常。
  解决：在路由跳转逻辑中手动控制滚动，或禁用自动滚动恢复：

  // 禁用浏览器自动滚动恢复
  history.scrollRestoration = 'manual';
  // 路由跳转后强制滚顶
  window.scrollTo(0, 0);
  

• 组件渲染时机不匹配
  单页应用中，首次跳转时目标组件可能还未完成DOM渲染，此时执行滚动操作无法生效；第二次跳转时组件已被缓存，DOM就绪速度快，滚动正常触发。
  解决：在组件挂载完成后触发滚动。比如React中：

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);
  

  Vue中可在mounted钩子或路由afterEach守卫中执行滚顶逻辑。

• 点击事件默认行为被意外拦截
  DocSidebar的点击事件处理函数中，可能存在preventDefault()或stopPropagation()，意外阻止了浏览器导航后的默认滚顶行为；第二次点击时由于条目已处于激活状态，拦截逻辑未触发。
  解决：检查侧边栏点击事件代码，移除不必要的默认行为拦截，确保导航后浏览器的默认滚顶逻辑正常执行。

• 异步数据加载导致布局偏移
  首次跳转时页面依赖异步数据渲染，初始DOM高度较低，执行滚顶后数据加载完成撑高页面，视觉上看起来未滚顶；第二次跳转时数据已缓存，DOM直接渲染完整高度，滚动效果正常。
  解决：等待数据加载完成后再执行滚顶操作，或为页面容器设置最小高度，避免初始布局高度不足导致的视觉误差。

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