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/Manipulating_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) {
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id
}

Answer 4

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

真正简单的历史记录：http://code.google.com/p/reallysimplehistory/ SWF地址：http://www.asual.com/swfaddress/

Answer 5

想给Catherines回答添加评论，但我还没有代表 -

很好的解决方案，但它在Chrome中不适用于$（'html'）。scrollTop（）始终返回0 - 次要编辑可以解决问题：

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

Answer 6

根据Sunny的回答我做了这个函数，也避免了undefined和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;
            }
        }
    }

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

6 个答案: