Question

似乎我必须完全缺少一些基本的东西。我想要实现的目标看起来很常见，所以它让我想知道为什么没有直截了当的方式。

问题是我想从JavaScript刷新当前页面并同时登陆#section。如果我这样做：

document.location.href = document.location.href + "#section";

我测试过的所有浏览器都滚动到#section（没有重新加载）。这在某种程度上是有道理的。只是为了完整，如果我这样做

document.location.assign(document.location.href + "#section");

它做同样的事情（并不奇怪;它在内部归结为相同的功能肯定）。最后，document对象似乎也有document.reload()函数，它接受一个可选的布尔参数，指定我是否要强制重新加载，但显然，它不允许指定#section。我能找到的唯一方法（使用这些方法）是以下组合：

document.location.assign(document.location.href + "#section");
document.location.reload();

但它并不理想，因为你可能已经猜到了，它会滚动然后重新加载，这会导致浏览器最终实际滚动三次。

我知道有很多方法可以解决它：服务器端重定向或添加一些独特的随机查询字符串参数，但似乎很奇怪，没有简单的方法。

Answer 1

这是位置对象的“哈希”值。你需要像这样设置......

location.hash = "#section";

如果这不能始终如一地工作，您可能需要考虑使用scrollToElement函数...

function scrollToElement(elem) {
    if(typeof elem == 'string') elem = document.getElementById(elemId);
    var top = 0;

    if(elem) {
        if(elem.offsetParent) {
            top = elem.offsetTop;

            while(elem = elem.offsetParent) {
                top += elem.offsetTop;
            }
        }

        window.scrollTo(0, top);
    }

}

如果您绝对需要重新加载页面（不确定为什么会这样），请尝试打开一个窗口......

window.open(location.href + '#section', '_top');

或尝试替换......

location.replace(location.href + '#section');

Answer 2

有一个更简单的解决方案：

if (document.location.href.match(/[?]/))
  document.location.href = document.location.href + '&fake_param=' + Math.random() + '#section'  ;
else    
  document.location.href = document.location.href + '?fake_param=' + Math.random() + '#section'  ;

强制页面刷新并跳转到#section

2 个答案: