29

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

4

8 回答 8

36

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

于 2009-08-02T02:47:56.510 回答
25

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

<a href="javascript:void(0);">linktxt</a>
于 2013-04-04T14:27:21.987 回答
9

我可能遗漏了一些东西，但为什么不给他们不同的 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>

或者你喜欢的任何约定。

于 2009-08-02T02:44:20.353 回答
5

还，preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }
于 2013-12-06T03:21:10.150 回答
3

我找到了解决方案。在这里，我通过调用 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>

感谢站点点

于 2013-06-25T04:13:33.023 回答
1

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

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

于 2009-08-02T03:14:41.897 回答
0

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

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

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

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

于 2017-03-21T03:26:53.133 回答
0

有一个根本没有任何 JavaScript 的解决方案：

<a href="#!">I will not jump to the top</a>
于 2021-04-13T20:54:13.023 回答