Question

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

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

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

...

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

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

这是标准行为吗？修复此问题的最佳方法是使用onLoad或类似的方法强制页面位置吗？

Answer 1

window.location.href = "/this/url/#post-10";将自行运行，无需再次重新加载页面，这将（据我所知）支持上一个滚动位置。

Answer 2

如果您使用的是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 [];
}

重新加载页面;锚链接被忽略，以前的滚动位置是有利的吗？

2 个答案: