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

StackOverflow https://stackoverflow.com/questions/1218034

题

我有各种链接，它们都有唯一的ID，它们是<！> quot;伪锚。<！> quot;我希望它们影响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中的哈希值发生变化。

有帮助吗？

解决方案

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

或者你喜欢的任何惯例。

其他提示

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

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

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

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

此外，preventDefault 

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

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

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

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

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

在Chrome 56，Firefox 52和Edge（IE？）中运行良好。另一个好处是，这不会产生任何控制台错误或警告。

希望它能帮到我以外的人。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top