Javascript 如何捕获浏览器返回操作以保持用户在页面中而不刷新？

我试图控制我的PWA上的默认后退操作，因为当用户按下手机的后退按钮时，UX会出错

例如，当显示模式时，后退按钮应关闭模式，而不返回上一页

经过大量研究和测试，我终于通过以下代码实现了这一点：

$(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会让页面无论如何都跳到顶部

更新： 谢谢大家的评论。我想出了一个简单的方法来防止页面滚动（或者至少是明显滚动），就像@reynolds建议的那样。。。但是，为了一些奇怪的原因，使用

            history.go(1);

而不是 历史。pushState（{}，”）

工作

---

历史记录发生了什么。go（1）是，与其让页面重新加载到页面顶部，“前进”似乎会自动滚动到您以前所在的位置，速度非常快，用户甚至不会再注意到。这种行为似乎是我在桌面和移动浏览器（Firefox、Chrome、Opera）上测试过的。漂亮

您可以保留

scrollTop

值，该值用于保存已滚动窗口的数量

scrollPos = 0
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
});

然后在pushstate上更新它

if(goBack == true){
    history.back();
}else {
    // Stay on the current page.
    history.pushState({}, '');
    $(window).scrollTop(scrollPos);
}

---

history.pushstate

不阻止向后导航，而是在向后导航发生之前将状态推送到浏览器的历史堆栈中。也就是说，如果您对此没有意见，那么您可以像前面所说的那样保持页面的先前位置。但是，在通过从state对象加载页面之后，您需要这样做

捕获滚动位置，如下所示：

scrollPos = 0
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
});

然后，将其添加到状态：

if(goBack == true){
    history.back();
}else {
    // Stay on the current page.
    history.pushState({ 'scrollPos': scrollPos }, '');
}

最后，检查页面加载状态并滚动至scrollPos（如果可用）：

const currentState = history.state;

$(window).on('beforeunload', function() {
    if (currentState && currentState.scrollPos) {
        $(window).scrollTop(currentState.scrollPos); 
    }
});

但是，这也会导致页面在刷新时滚动到scrollPos

---

或者，如果您真的想阻止返回，我建议您先阅读。

如果您只是编辑这一部分会发生什么：

history.pushState（{}，”）？@johnSmith-则不会阻止后退操作。页面将返回到上一页。。。无益。