防止Ajax网站在按下后退按钮后跳回顶部

Question

我目前正在开发一个支持ajax的网站。浏览网站和浏览器的历史记录非常有效，但有一个问题我无法解决。

当用户按下后退按钮时，最后一页将再次出现。但是，尽管我通过popstate事件将垂直滚动位置设置为上一个，但它再次跳回到顶部。。。

function loadContent(nextContent, nextUrl, newPage = true) {
var currUrl = window.location.pathname;
currUrl = currUrl.slice(7,currUrl.length);
var scrollY = window.scrollY;
var prevContent = document.getElementById("page").innerHTML;
document.getElementById("page").innerHTML = nextContent;
if (newPage) {
// overwrite current history entry
history.replaceState({ content: prevContent, url: currUrl, scrollY: scrollY }, null, currUrl);
initPage();
window.scrollTo(0,0);
// write new entry
history.pushState({ content: nextContent, url: nextUrl, scrollY: 0 }, null, nextUrl);
} else {
initPage();
// scroll to previous scroll position
window.scrollTo(0,history.state.scrollY);
}
}
window.onpopstate = function(e) {
loadContent(e.state.content, e.state.url, false);
// page scrollY will be set in load, after page content was added
}

到目前为止，我知道代码是有效的，因为早些时候我在window.scrowlTo()后面放了一个警告，在我看到的冻结过程中，页面位于正确的位置。但在继续之后，它跳到了顶端。是否还有另一个(默认)事件，在后台滚动到顶部？

感谢的帮助

Answer 1

我现在通过将onopstate函数更改为以下内容来解决问题：

window.onpopstate = function(e) {
loadContent(e.state.content, e.state.url, false);
// as previous window.scrollTo() have no effect, do it within a few millisecs again
setTimeout(function() {
window.scrollTo(0,history.state.scrollY);
}, 5);
}

不是很漂亮，但很管用。如果有人知道一个干净的修复方法或发生这种效果的原因，请分享你的知识！