在 Chrome 中滚动后如何返回到指定锚点？

Question

如果我加载带有命名锚点的 URL（如本例），Chrome 会直接将我带到页面中包含该锚点的部分。到目前为止，一切都很好。

但如果我滚动一下，我可能会忘记锚点在哪里。我怎样才能返回指定的锚点？

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

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

Answer 1

使用此书签：

\n\n

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

\n\n

解释：

\n\n

\n
• 设置location.hash将使页面滚动到该锚点。
\n
• 作为一种特殊情况，设置location.hash为自身是无操作的。
\n
• 但是，如果我们将其设置为其他值，然后立即返回到原始值，它会滚动。
\n
• 最后，小书签必须将null/undefined作为其最终值，或者（由于历史原因）它们用其最终值替换页面正文。
\n

\n\n\n\n

【以下内容仅供“加分”】

\n\n

或者，我们可以按照 user202729\xe2\x80\x99s 答案做一些事情。他的答案仅适用于由 形成的锚<a id="foo">。它们不\xe2\x80\x99t与使用的锚点一起工作<a name="foo">，例如在SU/SO/SE上使用的锚点！\n我们可以捕获这些（可能有误报——我没有太多地探索这种方法）

\n\n

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

\n\n

然而，即使这种方法在像 github.com 这样使用<a class="anchor" href="#foo">. AFAICT，该方法是非标准的，需要自定义 JavaScript。我上面的初始方法适用于所有三种锚样式。

\n\n

ps 我喜欢来自 SE 的想法的协作。阅读 user202729\xe2\x80\x99s 的答案以及 Dean Harding\xe2\x80\x99s 对如何将 HTML 页面滚动到给定锚点的答案？给了我实验所需的想法，并通过我的方式找到答案。

\n

Answer 2

您只需执行一些 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()