Webflow博客站：Safari返回重载后滚动位置丢失求解决方案

问题背景 #

• 用Webflow搭建博客站，主页是每日更新的长信息流列表
• 需求：用户从文章页返回主页时，页面自动重载以获取最新内容，同时保留之前浏览到的滚动位置
• 当前问题：已添加onpageshow重载代码，Chrome等浏览器正常，但Safari（iPhone/Mac）重载后滚动位置回到顶部

当前使用代码 #

<script>
(function () {
    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
})();
</script>

解决方案代码 #

替换原有代码，将以下脚本嵌入Webflow的Head Code区域：

(function() {
  // 离开页面时记录滚动位置到会话存储
  window.addEventListener('pagehide', function() {
    sessionStorage.setItem('scrollPosition', window.scrollY);
  });

  // 页面加载完成后恢复滚动位置
  window.addEventListener('load', function() {
    const savedPos = sessionStorage.getItem('scrollPosition');
    if (savedPos) {
      window.scrollTo(0, Number(savedPos));
      sessionStorage.removeItem('scrollPosition');
    }
  });

  // 保留返回时的重载逻辑
  window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
      window.location.reload();
    }
  });
})();

代码说明 #

• pagehide事件：用户离开主页时，把当前滚动位置存在sessionStorage里（仅当前浏览器会话有效，关闭浏览器自动清除）
• load事件：页面重载完成后，读取存储的位置并滚动到对应位置，之后清除存储，避免用户直接打开主页时也跳到这个位置
• 保留原有的pageshow逻辑，确保返回主页时强制重载获取最新内容

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