我可以在不滚动网页的情况下更新 window.location.hash 吗？

Question

使用JavaScript，有没有办法在不滚动网页的情况下更新window.location.hash？

我有可点击的标题元素，可以切换它们正下方的 div 的可见性。 我希望在单击标题时在历史记录中显示 /foo#bar，但不希望页面滚动。 因此，当离开 /foo#bar 时，我将能够使用后退按钮，并让 ID 位于 window.location.hash 中的 div 在返回时可见。

这种行为可能吗？

Answer 1

要在不重新加载/滚动页面的情况下更改哈希值，您现在只需使用 html5 history.pushState 即可。

history.pushState(null,null,'#hashexample');

所有主要浏览器均支持它：

http://caniuse.com/history

MDN：

https://developer.mozilla.org /en-US/docs/Web/Guide/API/DOM/Manipulated_the_browser_history#The_pushState().C2.A0method

另请注意，我们在这里使用的最后一个 url 参数可以是任何 url，因此它不限于哈希值。

Answer 2

尽可能简单

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Answer 3

您可以尝试的另一件事是暂时更改哈希指向的元素的 id。 为我工作！

function changeHashWithoutScrolling(hash) {
  const id = hash.replace(/^.*#/, "")
  const elem = document.getElementById(id)
  if (elem) {
    elem.id = id + "-tmp"
    window.location.hash = hash
    elem.id = id
  }
}

Answer 4

这种行为是很有可能的。 您应该研究一些为您提供此功能而开发的库。

非常简单的历史记录：http://code.google.com/p/reallysimplehistory/
SWFAddress： http://www.asual.com/swfaddress/

Answer 5

根据 Sunny 的回答，我创建了这个函数，它也避免了未定义和空值：

    function changeHashWithoutScrolling(hash) {
        var id;
        var elem;

        id = hash.replace(/^.*#/, '');

        if (id) {
            elem = document.getElementById(id);

            if (elem) {
                elem.id = id + '-tmp';
                window.location.hash = hash;
                elem.id = id;
            }
        }
    }

Answer 6

想向凯瑟琳的答案添加评论，但我还没有代表 -

很好的解决方案，但它在 Chrome 中对我不起作用，因为 $('html').scrollTop() 总是返回 0 - 一个小的编辑解决了问题：

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);