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

【问题标题】：HTML anchor link with no scroll or jump没有滚动或跳转的 HTML 锚链接
【发布时间】：2010-11-16 02:59:41
【问题描述】：

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

【问题讨论】：

为什么要锚点出现在 URL 中？
可能会使用像 Twitter 这样的哈希值，它会以某种方式更新页面。
锚点作为一种保持后退和前进按钮支持的方式。我想在示例 sn-p 中使用“tab1”而不是“button1”会更明显。
这里有几个聪明的想法：stackoverflow.com/questions/1489624/…

标签： javascript html xhtml scroll anchor

【解决方案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 都是唯一的）

【讨论】：

是的，我可以手动将 window.location.hash 设置为“#”，但是那会强制浏览器跳转到顶部。

【解决方案2】：

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

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

【讨论】：

他需要更改 url，因为 mootools 的 javascript 魔法

【解决方案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>

或任何您喜欢的约定。

【讨论】：

浏览器仍会移动，因为 URL 已“更改”到新位置。
非常感谢您建议使 id 具有唯一性（我只是在 id 上添加了一个连字符，然后在我的代码中执行一些基本的连接来说明这一点）。以我想要的方式完美运行（至少在 Firefox 和 Safari 中，尚未在 IE 中进行测试，尽管我怀疑它应该没问题。）但是，一个挥之不去的问题是 Home 链接的锚点基本上没有（“#”） .那仍然滚动到顶部，如果我有一个 onclick="return false" （正如 Adam Batkin 建议的那样），则 url 哈希值不会改变。我可以让它成为 href="#home" 或其他东西，但我真的不会。想法？
仍然不明白为什么它需要是#foo——这种安排是否有程序化的原因？ URL 已经有其他方式来表示 URL 中的数据，不需要 javascript 技巧。
好吧，如果 url 是 bar.html#tab1 然后你导航到 bar.html#tab2 它更容易当你点击返回按钮时你在哪个页面上。但是让我们说“主页”按钮就像一个“隐藏所有标签”按钮。我想要锚点的唯一原因是使 url 可以成为书签/可发送，并且不会导致页面重新加载。当该页面重新打开时，我已经知道哪个“标签”被添加了书签，所以我可以回到那个页面。我讨厌插入我自己的网站，但是如果您单击图标、主页按钮，然后尝试使用浏览器的后退按钮，您会看到。 shinyfoil.com
我明白你现在的意思了——谢谢你的例子（顺便说一句，这个网站不错）。但是，由于您试图规避网络应该如何工作的一些基本规则——锚并不意味着那样工作——我想你毕竟需要诡计。建议的技巧：将所有“真实”锚点（#matches 等）放在隐藏的 div 中，向下设置约 200 像素并使用 CSS 固定位置：固定。

【解决方案4】：

另外，preventDefault

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

【讨论】：

【解决方案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>

感谢sitepoint

【讨论】：

对我来说最好的答案！我在我的代码中将 10 更改为 0，因为有一个小滚动，我的眼睛不太好 :)

【解决方案6】：

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

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

【讨论】：

【解决方案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 中运行良好。另一个好处是这不会产生任何控制台错误或警告。

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

【讨论】：

【解决方案8】：

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

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

【讨论】：