javascript - 没有滚动或跳转的 HTML anchor 链接

Question

我有各种链接，它们都有唯一的 ID，是“伪 anchor ”。我希望它们影响 url 哈希值，点击魔术全部由一些 mootools 代码处理。但是，当我单击链接时，它们会滚动到自己(或在一种情况下滚动到顶部)。我不想滚动到任何地方，但还需要我的 javascript 来执行并在 url 更新中具有哈希值。

模拟示例代码:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

因此，如果您要单击“按钮 1”链接，则 url 可能是 http://example.com/foo.php#button1

有没有人对此有任何想法？简单地让一些 javascript 返回 void 会终止滚动，但也会终止我的 javascript(尽管我可能可以使用 onclick 来解决这个问题)但更重要的是，可以防止 url 中的哈希值发生变化。

Answer 1

anchor 链接的全部意义在于将页面滚动到特定点。因此，如果您不希望这种情况发生，您需要附加一个 onclick 处理程序并返回 false。即使只是将其添加为属性也应该有效:

<a href="#button1" id="button1" onclick="return false">button 1</a>

上述的一个副作用是 URL 本身不会改变，因为返回 false 将取消事件。因此，由于您希望 URL 实际发生变化，您可以将 window.location.hash 变量设置为您想要的值(这是您可以在没有浏览器强制的情况下更改的唯一 URL 属性重新加载)。您可能可以附加一个事件处理程序并调用类似 window.location.hash = this.id 的东西，尽管我不确定 mootools 如何处理事件。

(你还需要所有的 ID 都是唯一的)