如何捕获浏览器返回动作，修复PWA中返回按钮引发的页面滚动跳转问题？

我最近在优化PWA的用户体验，核心需求是控制手机返回按钮的默认行为：当模态框处于显示状态时，点击返回键应该关闭模态框，而不是直接返回上一页。

最开始我写了这段代码实现逻辑：

$(window).on('popstate', function (e) { 
  let goBack = true; 
  if($("#modal_box").is(":visible")) { 
    goBack = false; 
    $("#modal_box").modal('hide'); 
  } 
  if(goBack == true){ 
    history.back(); 
  }else { 
    // Stay on the current page. 
    history.pushState({}, ''); 
  } 
});

但很快发现了问题：当用户滚动到页面中部或底部时，这段代码会让页面直接跳回顶部，用户体验很差——我当时也以为history.pushState一定会导致这种跳顶行为。

后来在尝试各种修复思路后，我找到了一个简单的解决办法：把history.pushState({}, '')替换成history.go(1)！

为什么这个方法有效？

• history.go(1)的作用是“前进”到当前历史记录的下一条（因为我们刚触发了popstate，历史栈里其实已经有了当前页面的记录）
• 它不会触发页面重新加载跳顶，而是快速恢复到之前的滚动位置，用户几乎察觉不到变化
• 我在桌面和移动端的Firefox、Chrome、Opera浏览器里都测试过，原生支持这个行为，效果很稳定

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