jquery - history.pushState在浏览器后退按钮上中断

我正在开发一个单页面应用程序，其中每个部分都通过ajax加载。主页是其自己的页面，然后单击“关于”，它将带您到单页应用程序。我已经在每个部分上更改了网址，并在浏览器上使用了此代码段的后退和前进按钮：

$('.down-button').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });

但是，当您完全单击返回首页时，该首页不会刷新，而是保留在“关于”页面上。或者，如果您单击返回首页的链接，则会收到404错误。

我想念什么？

编辑

这是其余的代码：

function button_scroll () {
// Call scrollIntoView js file into this
$.getScript("/js/jquery.scrollintoview.min.js", function() {
    $('.down-button').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-principles').on('click', function() {
        var stateObj = { mission: "about-mission" };
        history.pushState(stateObj, null, "about-mission");
        $('#mission-wrap').scrollintoview({ duration: 1000 });
    });
    $('.down-button-principles').on('click', function() {
        var stateObj = { snapshot: "about-snapshot" };
        history.pushState(stateObj, null, "about-snapshot");
        $('#snapshot-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-snapshot').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });
    $('.down-button-snapshot').on('click', function() {
        var stateObj = { people: "about-people" };
        history.pushState(stateObj, null, "about-people");
        $('#people-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-people').on('click', function() {
        var stateObj = { snapshot: "about-snapshot" };
        history.pushState(stateObj, null, "about-snapshot");
        $('#snapshot-wrap').scrollintoview({ duration: 1000 });
    });

});

}

//Dropdown
$(document).ready(function () {
$(window).on('load resize', function () {
    resize_mission();
    resize_principles();
    resize_snapshot();
    resize_people();
    button_scroll();
});
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        var url = 'about2.php'
        var stateObj = { mission: "about-mission" };
        history.pushState(stateObj, null, "about-mission");
        $.get(url, function(data) {
            resize_mission();
            resize_principles();
            resize_snapshot();
            resize_people();
            button_scroll();
        });
    });
});

}）;

这就是我要做的。没有插件。

最佳答案

您是否正在将About事件的click事件的默认操作停止到主页？正如您在链接上使用preventDefault()或stopPropagation()一样，单击关于页面？您是否还在停止hashchange事件的默认行为？我们可能需要查看有关您的历史记录实现的更多代码。您是否使用任何历史插件？

关于jquery - history.pushState在浏览器后退按钮上中断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13240783/