4

这让我感到困惑，我担心我可能会做一些非常愚蠢的事情。

我有一个执行 ajax 调用的表单，成功后，重新加载（相同）页面并使用 URL 哈希/片段跳转到页面底部的提交数据。

window.location.href = "/this/url/#post-10";
window.location.reload();

...

<div id="post-10">...</div>

我注意到，至少对于 Chrome，之前的滚动位置比我提供的锚链接更受青睐 - 所以页面重新加载，成功跳转到我的id锚点，但是一旦页面完成加载，它就会跳转到滚动的位置在上一页。

这是标准行为吗？解决此问题的最佳方法是简单地强制页面位置使用onLoad或类似的东西吗？

4

2 回答 2

2

window.location.href = "/this/url/#post-10";将自行工作，无需再次重新加载页面，这将（据我所知）有利于先前的滚动位置。

于 2012-05-17T16:44:01.503 回答
1

如果您使用的是ajax，为什么要重新加载页面？

只需删除该行window.location.reload();

window.location.href = "/this/url/#post-10";足以将卷轴带到那post-10部分。

顺便说一句，更好（酷）的方法是使用滚动效果。

var targetOffset = $('#post-10').offset().top ;
var scrollElem = scrollableElement('html', 'body');

$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
    // scroll is complete
      location.hash = 'post-10';
});

   // Use the first element that is "scrollable"  (cross-browser fix?)
function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
        var el = arguments[i],
        $scrollElement = $(el);
        if ($scrollElement.scrollTop()> 0) {
            return el;
        } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
                return el;
            }
        }
    }
    return [];
}
于 2012-05-17T17:17:05.890 回答