防止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.scrollTo（）之后放了一个警报，在冻结期间，我看到页面位于正确的位置。 但是在继续之后，它跃升到了顶端。 可能还有另一个（默认）事件滚动到后台顶部吗？

感谢帮助

Answer 1

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

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

不是很漂亮，但是可以用。 如果有人知道一个完整的修复程序或这种效果发生的原因，请分享您的知识！