Safari点击返回按钮不记忆滚动位置问题（关联Google Analytics加载）

API 探路者

2026-9-30

根因说明

该问题本质是Safari的往返缓存（bfcache）滚动恢复逻辑和Google Analytics脚本加载时机冲突导致：Safari从bfcache恢复页面时会先还原之前的滚动位置，但如果后续执行的GA脚本触发了页面重排/修改了DOM总高度，已恢复的滚动位置会失效，导致页面自动滚动到顶部。用户拒绝GA Cookie时GA不会加载对应功能脚本，因此问题不会复现。

解决方案

调整GA脚本加载时机
将GA的初始化、加载逻辑延后到页面核心渲染完成后执行，避免干扰滚动恢复。可以包裹在DOMContentLoaded+requestIdleCallback中执行，示例代码：

window.addEventListener('DOMContentLoaded', () => {
  // 仅在用户同意Cookie的情况下加载GA
  if (用户同意Cookie的判断条件) {
    requestIdleCallback(() => {
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '你的GA媒体资源ID');
      // 原动态加载analytics.js的逻辑放在此处
    });
  }
});

主动缓存并恢复滚动位置
监听页面生命周期事件，手动记录、恢复滚动位置，抵消GA脚本带来的滚动偏移：

// 离开页面时记录当前滚动位置
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('category_page_scroll_y', window.scrollY.toString());
});

// 页面展示时判断是否从缓存恢复，手动回滚位置
window.addEventListener('pageshow', (e) => {
  // e.persisted为true表示页面从Safari bfcache加载
  if (e.persisted) {
    const savedScroll = sessionStorage.getItem('category_page_scroll_y');
    if (savedScroll) {
      // 延迟执行，等待GA相关DOM操作完成
      setTimeout(() => {
        window.scrollTo(0, parseInt(savedScroll, 10));
      }, 150);
    }
  }
});

优化GA脚本加载属性
给analytics.js的脚本标签加上defer属性，放在body末尾加载，避免阻塞DOM解析和渲染；如果是动态插入脚本，不要插入到head或body顶部，尽量插入到body末尾，减少对页面初始布局的影响。
排查GA注入元素的布局影响
部分GA插件会自动向页面注入不可见的跟踪元素，若这些元素插入时没有设置脱离文档流的定位，会改变页面总高度触发滚动偏移。可以给所有GA自动注入的元素添加position: fixed; left: -9999px;的样式，避免影响页面布局。

调试方案

开启Safari开发菜单，勾选「保留日志」选项，避免页面跳转、返回时控制台日志被清空，在页面滚动事件、pageshow、load事件中打印window.scrollY值，定位滚动位置被重置的具体时间点，对应到同时执行的脚本。
使用Safari性能面板录制完整复现流程：开始录制 -> 分类页滚动到指定位置 -> 点击进入商品详情页 -> 点击返回按钮，停止录制后查看时间线中analytics.js加载的时间点，是否对应触发了Layout（重排）事件，确认重排是否改变了页面总高度。
逐行注释GA的自定义配置项，比如关闭增强型链接attribution、电子商务跟踪、自定义维度上报等附加功能，排查是否是特定GA功能触发的布局变化。
临时修改GA加载时机为页面加载3秒后执行，复现操作流程，若问题消失即可完全确认是GA加载时机导致的问题。

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