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

标签 javascript html xhtml scroll anchor

我有各种链接,它们都有唯一的 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 中的哈希值发生变化。

最佳答案

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 都是唯一的)

关于javascript - 没有滚动或跳转的 HTML anchor 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1218034/

相关文章:

添加/删除与编辑 DOM 的 Javascript 基准测试?

javascript - js播放音频的延迟

html - 主页部分布局

Jquery 或 Ajax 下拉 div

jquery - 仅当元素内部有另一个 <ul> 时,如何为列表元素提供样式,否则不应应用样式?

javascript - 如何使用 javascript 返回一组数据属性?

javascript - 我应该在哪里放置与 redux 中的 Action 相关的同步副作用?

php - 如何查询 html 选择表单?

javascript - 在表体上插入值后,将表体与表头对齐

html - 如何对 HTML 正文中的引号进行编码?