28

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

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

这种行为可能吗？

4

6 回答 6

57

要在不重新加载/滚动页面的情况下更改哈希，您现在可以简单地使用 html5 history.pushState。

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

所有主流浏览器都支持它：

http://caniuse.com/history

医疗器械网络：

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

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

于 2014-03-03T12:04:45.000 回答
30

尽可能简单

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);
于 2010-06-14T23:19:37.680 回答
22

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

function changeHashWithoutScrolling(hash) {
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id
}
于 2010-04-08T07:14:29.877 回答
2

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

真正简单的历史：http ://code.google.com/p/reallysimplehistory/ SWFAddress：http ://www.asual.com/swfaddress/

于 2009-03-14T02:33:26.263 回答
2

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

Great solution however it wasn't working for me in Chrome as $('html').scrollTop() always returns 0 - a minor edit resolves the issue:

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);
于 2016-01-05T23:29:05.347 回答
2

Bas on the answer from Sunny I made this function that also avoids undefined and nulls:

    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;
            }
        }
    }
于 2016-06-03T11:27:40.153 回答