了解 <a href="#!"

Question

我正在寻找一种方法来防止在单击href 属性内带有# 的链接后被带到页面顶部：

<a href="#" onclick="foobar()">click me</a>

然后我遇到了这个简单的解决方案，将# 切换为#!：

<a href="#!" onclick="foobar()">click me</a>

使用 jQuery 可以在线获得各种其他解决方案，例如：

$('.service').click(function(e) {
    e.preventDefault();
});

我最终最喜欢#!，因为它非常干净但我无法在网上任何地方找到任何文档，了解在代码行中插入! 时实际发生的情况.

问题：

#! 究竟是什么导致了 html 代码的作用？这是防止将用户带到页面顶部的默认操作的好方法，还是由于其他原因这种方法不好？我担心的是它可能是一种与某些浏览器不兼容的hacky方法。

Answer 1

#! 究竟是什么导致了 html 代码的行为？

它告诉浏览器，当点击该链接时，它应该将页面滚动到锚点!。因为页面上没有这样的锚点，所以页面不会移动。 （从技术上讲，您可以在页面上使用名称为 ! 的锚点 [! 是一个完全有效的 HTML id 值]。只是……您可能没有。 )

您通过将id 值分配给元素（或使用过时的<a name="...">...</a> 构造）在页面上创建锚点； hrefs 带有 片段标识符（# 后面的位）告诉浏览器加载资源（在您的示例中，它是当前页面，已加载）然后向下滚动到那个锚。例如，如果您在页面上有<div id="foo">...</div>，导航到该页面上的#foo，浏览器将向下滚动以显示该div。当您提供一个不存在的锚点时，不会进行滚动。