如何使Gatsby页面刷新滚动到顶部的代码适配多浏览器

针对你遇到的仅Firefox生效、Chromium内核浏览器失效的问题，核心是解决不同浏览器在页面刷新时的DOM渲染时机、滚动事件触发顺序差异，下面是修改后的兼容方案：

1. 完整gatsby-browser.js代码实现 #

// gatsby-browser.js
exports.shouldUpdateScroll = ({ routerProps: { location, action }, getSavedScrollPosition }) => {
  // 处理页面刷新场景：从sessionStorage读取持久化的滚动位置
  if (action === "REPLACE" || !location.state?.prevPath) {
    const savedPosition = sessionStorage.getItem(`scroll-pos-${location.pathname}`);
    if (savedPosition) {
      const { x, y } = JSON.parse(savedPosition);
      // 给Chromium浏览器加延迟，确保DOM渲染完成后再滚动
      setTimeout(() => {
        window.scrollTo(x, y);
      }, 0);
      return false; // 禁用Gatsby默认滚动恢复逻辑
    }
  }

  // 路由跳转场景沿用默认逻辑
  const defaultPos = getSavedScrollPosition(location);
  return defaultPos || [0, 0];
};

// 页面路由切换/卸载前，保存当前滚动位置到sessionStorage
exports.onRouteUpdate = ({ location }) => {
  sessionStorage.setItem(
    `scroll-pos-${location.pathname}`,
    JSON.stringify({ x: window.scrollX, y: window.scrollY })
  );
};

2. 关键兼容修改说明 #

• 用sessionStorage持久化位置：Gatsby内置的滚动恢复在页面刷新时会丢失数据，sessionStorage能跨页面刷新保留滚动坐标，解决频繁刷新后滚动缓慢回顶的问题。
• 延迟滚动执行：Chromium内核浏览器刷新后，DOM渲染完成时机晚于Firefox，setTimeout(() => {}, 0)把滚动操作放到事件队列末尾，确保页面元素加载完成后再执行滚动。
• 区分刷新与跳转：通过action和location.state判断是页面刷新还是路由跳转，避免干扰正常路由切换时的滚动恢复逻辑。

3. 异步内容场景优化（可选） #

如果页面包含异步加载的图片、组件，可在页面组件中补充以下逻辑，确保内容加载完成后再滚动：

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    const savedPos = sessionStorage.getItem(`scroll-pos-${window.location.pathname}`);
    if (savedPos) {
      const { x, y } = JSON.parse(savedPos);
      // 等待所有图片加载完成
      const images = document.querySelectorAll('img');
      const allLoaded = Array.from(images).every(img => img.complete);
      
      if (allLoaded) {
        window.scrollTo(x, y);
      } else {
        images.forEach(img => img.addEventListener('load', () => {
          window.scrollTo(x, y);
        }, { once: true }));
      }
    }
  }, []);

  // 页面内容
  return <div>...</div>;
}

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