历史 pushState 和滚动位置答案

【问题标题】：history pushState and scroll position历史 pushState 和滚动位置
【发布时间】：2013-05-24 09:05:05
【问题描述】：

当用户使用 HTML5 popstate 处理程序返回浏览器历史记录时，我正在尝试检索滚动位置。

这是我所拥有的：

$(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>

当我返回时，我无法检索 stateData 的值。

我认为这是因为 popstate 正在检索初始页面加载的值，而不是我在单击超链接时推送到历史记录的状态。

如何在返回时获取滚动位置？

【问题讨论】：

标签： javascript jquery html pushstate html5-history

【解决方案1】：

我自己设法解决了这个问题：

在导航到新页面之前，我们必须覆盖历史堆栈上的当前页面。

这允许我们存储滚动位置，然后在我们返回时将其从堆栈中弹出：

    $('#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();

    });

【讨论】：

不幸的是，您似乎无法在 popstate 事件发生之前更新当前状态。现在我忽略了这个问题，就像 soundcloud.com 一样。

【解决方案2】：

找到一种使用 jQuery 使其更具动态性的方法，希望对您有所帮助：

$(".lienDetail a").on('click',function(){
    history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname);
}

这里是没有 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);
}

这将推送每次点击链接的历史状态，例如结果列表中带有lienDetail类的链接

【讨论】：