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”链接，则网址可能为http://example.com/foo.php#button1

有没有人对此有任何想法？简单地使用一些javascript返回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

我找到了解决方案。在这里，我保存了一个旧的位置来调用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>

感谢sitepoint

Answer 5

此外，preventDefault

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

Answer 6

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

这对页面的显示方式没有任何影响（除非你想要它），并且大多数脚本语言已经有适当的工具来轻松（和安全地）读取数据。

Answer 7

在这里，我们在这个答案发布7年后，我发现了一种不同的方法使它工作：只需将window.location.hash指向一个不存在的锚！它不适用于<a>，但在<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>

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

8 个答案: