在 Chrome 中滚动后如何返回命名锚点？

Question

如果我加载一个带有命名锚点的 URL（例如这个)，Chrome 会直接带我到页面中包含锚点的部分。到目前为止，一切顺利。

但如果我滚动一点，我可能会忘记锚点在哪里。我该如何返回到命名的锚点？

我尝试刷新页面，但 Chrome 不会带我回到锚点。我尝试过强制刷新（Ctrl-F5），但没有效果。我还尝试过 Ctrl-L（选择地址栏）然后按 ENTER 重新加载页面。

我的解决方法是关闭该选项卡，然后使用完整 URL 再次打开一个新选项卡。对于阅读大量规范文档的人来说，这非常烦人！有没有更好的方法？

Answer 1

您可以简单地执行一些 JavaScript 来将元素滚动到视图的顶部：

document.getElementById(location.hash.slice(1)).scrollIntoView()

来源：javascript - 如何将 HTML 页面滚动到给定的锚点？ - 代码日志

为了方便起见，可以将其作为书签添加到书签栏，或者为其定义键盘快捷键。

javascript:document.getElementById(location.hash.slice(1)).scrollIntoView()

如果 URL 中没有哈希，则会导致 JavaScript 错误（静默错误）。要滚动到页面顶部，请使用

(document.getElementById(location.hash.slice(1))||document.body).scrollIntoView()

Answer 2

使用此书签：

javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

解释：

• 设置location.hash将导致页面滚动到该锚点。
• 作为特殊情况，设置location.hash为本身是无操作。
• 它做滚动，但是如果我们将其设置为其他东西然后立即恢复到原始值。
• 最后，小书签必须具有null/undefined作为其最终值，否则（由于历史原因）它们将用其最终值替换页面主体。

---

[以下内容仅供“额外加分”]

或者，我们可以按照 user202729 的回答来做。他的回答只适用于由 形成的锚点<a id="foo">。它们不适用于使用 的锚点<a name="foo">，例如 SU/SO/SE 上使用的锚点！我们可以使用以下方法捕获这些锚点（可能存在误报——我没有过多探索这种方法）

javascript: var h = location.hash.slice(1) ; (document.getElementById(h) || document.getElementsByName(h)[0] || document.body).scrollIntoView()

但是，即使这种方法在 github.com 等使用 的网站上也失败了<a class="anchor" href="#foo">。据我所知，这种方法是非标准的，需要自定义 javascript。我上面的初始方法适用于所有三种锚点样式。

附言：我喜欢来自 SE 的创意合作。阅读 user202729 的回答以及 Dean Harding 的回答如何将 HTML 页面滚动到给定的锚点？给了我所需要的想法，让我能够通过实验并思考找到答案。

Answer 3

为了补充@Noach 的解决方案，我想添加有关如何创建书签的信息。书签是执行 JavaScript 而不是打开网页的浏览器书签。

不幸的是，由于语法限制，无法在 superuser.com 中创建书签链接。因此您需要手动添加。

要在 Chromium 中添加书签，您可以右键单击书签栏，然后单击“添加页面...”。
或者，您可以转到书签管理器，然后右键单击并单击“添加新书签”：

在“名称”字段中粘贴re-anchor。此文本就是您将在书签栏中看到的内容。
在“URL”字段中粘贴javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

然后将新创建的书签小程序放在栏中的某个位置，以便在需要时单击它。