jQuery 历史 pushState 和滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16731271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
history pushState and scroll position
提问by George Filippakos
I am trying to retrieve the scroll position when a user navigates back in the browser history using HTML5 popstate handler.
当用户使用 HTML5 popstate 处理程序在浏览器历史记录中导航回时，我试图检索滚动位置。
Here is what I have:
这是我所拥有的：
$(document).ready(function () {
$(window).on('popstate', PopStateHandler);
$('#link').click(function (e) {
var stateData = {
path: window.location.href,
scrollTop: $(window).scrollTop()
};
window.history.pushState(stateData, 'title', 'page2.html');
e.preventDefault();
});
});
function PopStateHandler(e) {
alert('pop state fired');
var stateData = e.originalEvent.state;
if (stateData) {
//Get values:
alert('path: ' + stateData.path);
alert('scrollTop: ' + stateData.scrollTop);
}
}
<a id="link" href="page2.html"></a>
When I navigate back, I am unable to retrieve the values of the stateData.
当我返回时，我无法检索 stateData 的值。
I presume this is because the popstate is retrieving the values of the initial page load and not the state I pushed to the history when the hyperlink was clicked.
我认为这是因为 popstate 正在检索初始页面加载的值，而不是我在单击超链接时推送到历史记录的状态。
How could I go about getting the scroll position on navigating back?
我怎样才能在导航回来时获得滚动位置？
回答by George Filippakos
I managed to solve this one myself:
我自己设法解决了这个问题：
We must overwrite the current page on the history stack before navigating to the new page.
在导航到新页面之前，我们必须覆盖历史堆栈上的当前页面。
This allows us to store the scroll position and then pop it off the stack when we navigate back:
这允许我们存储滚动位置，然后在我们返回时将其从堆栈中弹出：
$('#link').click(function (e) {
//overwrite current entry in history to store the scroll position:
stateData = {
path: window.location.href,
scrollTop: $(window).scrollTop()
};
window.history.replaceState(stateData, 'title', 'page2.html');
//load new page:
stateData = {
path: window.location.href,
scrollTop: 0
};
window.history.pushState(stateData, 'title', 'page2.html');
e.preventDefault();
});
回答by Mathieu Giboulet
Find a way to make this more dynamic with jQuery, hope this can help :
找到一种使用 jQuery 使其更具动态性的方法，希望这可以帮助：
$(".lienDetail a").on('click',function(){
history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname);
}
here the solution without jQuery :
这里没有 jQuery 的解决方案：
function pushHistory(e){
e = e || window.event;
var target;
target = e.target || e.srcElement;
if (target.className.match(/\blienDetail\b/)){
history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname);
}
}
if (document.body.addEventListener)
{
document.body.addEventListener('click',pushHistory,false);
}
else
{
document.body.attachEvent('onclick',pushHistory);
}
This will push history state for each click on link with lienDetail class for list of results for example
例如，这将为每次点击带有lienDetail类的链接推送历史状态以获取结果列表
