没有滚动或跳转的 HTML 锚链接

Question

我有各种链接，它们都有唯一的“伪锚”ID。 我希望它们影响 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 return void 杀死滚动但也会杀死我的 javascript（尽管我可能可以通过 onclick 解决这个问题）但更重要的是，防止 url 中的哈希值发生变化。

Answer 1

锚链接的全部意义在于将页面滚动到特定点。 因此，如果您不想发生这种情况，则需要附加一个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 都是唯一的）

Answer 2

您可以使用下面的代码来避免滚动：

<a href="javascript:void(0);">linktxt</a>

Answer 3

我可能遗漏了一些东西，但为什么不给他们不同的 ID？

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

或者你喜欢的任何约定。

Answer 4

此外， preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 5

我找到了解决方案。 在这里，我通过调用 href 保存旧位置并在滚动后恢复它

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

并在页面正文中

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

感谢站点点

Answer 6

更简单的方法可能是将其添加为 GET。 也就是说， http://example.com/foo.php?q=#button1 : http://example.com/foo.php#button1 http://example.com/foo.php?q=#button1而不是http://example.com/foo.php#button1

这不会对页面的显示方式产生任何影响（除非您希望这样做），并且大多数脚本语言已经拥有可以轻松（且安全地）读取数据的工具。

Answer 7

好吧，这个答案发布 7 年后，我找到了一种不同的方法来使它工作：只需将 window.location.hash 指向一个不存在的锚点！ 它不适用于<a> s，但在<div> s 中完美运行。

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

在 Chrome 56、Firefox 52 和 Edge (IE?) 38 中运行良好。另一个好处是这不会产生任何控制台错误或警告。

希望对我以外的人有帮助。

Answer 8

有一个完全没有任何 JavaScript 的解决方案：

<a href="#!">I will not jump to the top</a>