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

Posted 2023-02-19

【中文标题】我可以在不滚动网页的情况下更新 window.location.hash 吗？

【英文标题】：Can I update window.location.hash without having the web page scroll?

【发布时间】：2010-10-13 07:28:58

【问题描述】：

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

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

这种行为可能吗？

【问题讨论】：

请参阅this *** question 和/或this page，其中我提供了一个基本脚本来解决该问题。

谢谢。我已经检查了那个问题和你的自定义脚本。

【参考方案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，所以不限于hash。

【讨论】：

哦，我希望我能拥抱你。

replaceState 可能是去这里的更好方法。区别在于 pushState 会在您的历史记录中添加一个项目，而 replaceState 不会。

完成后，用window.location.hash验证，就可以了

【参考方案2】：

就这么简单

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

【讨论】：

我认为第一行应该是“var scrollmem = $('html,body').scrollTop();”匹配第三个。否则它在 Firefox 中对我不起作用。

@Anthony 是对的，不能在 firefox Sunny 中正常工作

【参考方案3】：

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

function changeHashWithoutScrolling(hash) 
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id

【讨论】：

这太棒了。效果很好。

我想你的意思是document.getElementById(id);

谢谢@AlienWebguy，修复了评论中的功能。

非常有效。谢谢！

【参考方案4】：

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

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

【讨论】：

太棒了。除了现有的 RSH 文档外，这些看起来都不错。我认为 SWFAddress 看起来是目前最好的选择。

确实如此。我觉得缺少RSH的文档。我使用 SWFAddress，到目前为止它工作得很好。

@shruggernaut 在 09 年写这个答案时，这比自己写要好得多。浏览器支持非常分散，该库允许您专注于创建产品，而不是自己创建库（当时需要它来实现此功能）。也就是说，我认为 *** 在某些时候应该会过时。特别是对于浏览器等快速发展的平台。

【参考方案5】：

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

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

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

【参考方案6】：

根据 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;