html 锚点只工作一次答案

【问题标题】：html anchor works only oncehtml 锚点只工作一次
【发布时间】：2011-07-09 12:36:37
【问题描述】：

我很惭愧地说我有一个锚问题。

所以我有这个代码：

<a name="map"></a>

$("div.store_list").click(function() {          
    //do some stuff         
    location.href = location.href + '#map'
});

第一次点击时效果很好。并且 URL 更改为：

http://mydomain.local/stores#map

第二次点击网址更改为如下，不起作用：

http://mydomain.local/stores#map#map

有什么建议吗？谢谢

【问题讨论】：

标签： html anchor

【解决方案1】：

如果您滚动并需要再次跳转，这对我有用：

onclick="location.hash=''; location.hash='#map';"

【讨论】：

【解决方案2】：

改用location.hash，例如

location.hash='#map'

【讨论】：

这只会工作一次。如果您再次滚动并调用单击功能，则锚定将不起作用。只需使用 ... document.location = "#map"; 即可解决
我不明白为什么这会解决问题，实际上它似乎产生了相同的结果

【解决方案3】：

问题已解决：document.location = "#map";

【讨论】：

【解决方案4】：

您可以检查以确保 URL 尚未包含您要附加的值：

$("div.store_list").click(function() {          
    //do some stuff
    if (location.href.indexOf('#map') == -1) {         
        location.href += '#map';
    }
});

【讨论】：

【解决方案5】：

遗憾的是，接受的解决方案对我不起作用。我设法让它在 Chrome 中工作，首先将锚值设置为“#”，然后将其设置到我想要的位置。

document.location.href = "#";
document.location.href = "#myAnchor";

一旦我这样做了，每次我点击一个带有锚标记的链接时都会触发它。

$(document).on('click', '.jump_to_instance', e => {

    // Get anchor name
    var anchorName = $(e.target).attr("href");

    // Set anchor to nothing first
    document.location.href = "#";

    // Set to new anchor value
    document.location.href = anchorName;
});

<a href="#myAnchor">Click me to go to anchor, I should work multiple times</a>

<div id="myAnchor">Will jump to here</div>

【讨论】：

【解决方案6】：

重置锚链接点击事件的滚动位置对我有用。看起来像 theres at least one bug 在 Chrome 版本 76 - 86 中带有锚链接（本文发布时最新的 macOS 版本）。

试试：

window.scrollTo(0, 0)

【讨论】：