HTML锚点只能使用一次

Question

很抱歉，我有一个锚点问题。

这是我的代码：

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

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

当第一次点击时，它能正常工作。URL更改为：

http://mydomain.local/stores#map

第二次单击后，URL 会更改为以下内容，并且无法正常工作：

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

有什么建议吗？谢谢。

- Gabriel Spiteri

Answer 1

如果你需要滚动并且再次跳转，这个方法适用于我：

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

- nipo

Answer 2

问题已解决，使用以下代码：document.location = "#map";

- Gabriel Spiteri

Answer 3

尝试使用location.hash代替，例如：

请点击此处了解更多。

location.hash='#map'

- Paul Dixon

---

这只能起作用一次。如果您再次滚动并调用单击函数，则锚定将不起作用。通过简单地使用... document.location =“#map”; 解决。 - Gabriel Spiteri

我不明白为什么这样做会解决问题，实际上它似乎产生了相同的结果。 - aw04

Answer 4

在锚点链接点击事件中重置滚动位置对我很有效。 似乎在Chrome 76-86版本（发布此帖子时最新的macOS版本）中存在至少一个关于锚点链接的错误。

尝试：

window.scrollTo(0, 0)

- Dean Sharon

Answer 5

您可以检查以确保URL不已经包含您要添加的值：

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

- Kon

Answer 6

很遗憾，这个已经被接受的解决方案对我不起作用。但在 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>

- Luke