history.pushState打破浏览器后退按钮

Question

我正在处理单个页面应用程序，其中每个部分通过ajax加载。首页是自己的页面，然后点击“关于”，它会将您带到单页面应用程序。我已经得到的URL来改变浏览器的每个部分和前进和后退按钮在这个片段的工作：

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

但是，当您单击返回主页的一路，网页不刷新，你仍然在'关于'页面。或者，如果您点击返回主页的链接，则会出现404错误。

我错过了什么？

EDIT

这里是代码的其余部分：

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(); 
     }); 
    }); 
}); 

}）;

这就是我正在做的。没有插件。

Answer 1

您是否停止关于页面上的点击事件到首页的默认操作？如果您在链接上使用preventDefault()或stopPropagation()，请点击您的关于页面？你是否也停止hashchange事件的默认行为？我们可能需要在执行历史记录时看到更多的代码。你使用任何插件的历史？