logo标签列表

我能否更新window.location.hash而不让网页滚动？

javascriptbrowser-historyback-buttondeep-linking
31

使用JavaScript，有没有一种方法可以更新window.location.hash而不滚动网页？

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

这种行为是否可能？

请查看这个stackoverflow问题和/或这个页面，我在其中提供了一个基本脚本来解决这个问题。 - KooiInc
谢谢。我已经查看了那个问题和你的自定义脚本。 - Jonathon Watney
6个回答
63
8
哦，我希望我能拥抱你。 - Jimbali
15
在这里，replaceState 可能是更好的选择。 pushState 会将一个项目添加到历史记录中，而 replaceState 则不会。 - A F
完成后，使用 window.location.hash 进行验证，它可以正常工作。 - Barbz_YHOOL
30

简单易懂

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);
2
我认为第一行应该是“var scrollmem = $（'html，body'）.scrollTop（）;”，以匹配第三行。否则，在火狐浏览器中无法正常工作。 - Anthony
@Anthony在Firefox中无法正常工作，Sunny函数运行良好。 - Amir Bar
22

你可以尝试的另一件事是暂时更改哈希指向的元素的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
  }
}
我认为你的意思是 document.getElementById(id);。 - AlienWebguy
谢谢@AlienWebguy，已经在评论中修复了该函数。 - Sunny
粗略有效。谢谢！ - Aaron Miller
3

根据Sunny的回答，我制作了这个函数，也避免了undefined和null:

    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;
            }
        }
    }
3
太好了。除了RSH的现有文档之外，其他都看起来不错。我认为SWFAddress现在似乎是最好的选择。 - Jonathon Watney
确实。我觉得RSH的文档缺乏。我使用SWFAddress，目前它一直运行良好。 - Willem
2
@shruggernaut 在2009年写这篇答案时，使用这个库比自己编写代码要好得多。当时浏览器的支持非常零散，而这个库可以让你专注于创建产品，而不是自己编写库（为了实现这个功能，当时需要这样做）。话虽如此，我认为Stackoverflow应该在某个时候淘汰过时的答案。特别是对于像浏览器这样快速发展的平台。 - Willem
2

我想在Catherine的回答下添加评论，但我还没有足够的声望 -

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

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接