主页 / computer / 问题 / 1471522
Accepted
Duncan Jones
Asked: 2019-08-15 23:16:51 +0800 CST

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

  • 772

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

但是如果我稍微滚动一下，我可能会忘记锚点在哪里。我怎样才能回到命名的锚点？

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

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

google-chrome html

3 个回答

  1. 使用此书签：

    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">. AFAICT，这种方法是非标准的，需要自定义 javascript。我上面的初始方法适用于所有三种锚点样式。

    ps 我喜欢来自 SE 的创意协作。阅读 user202729 的回答以及 Dean Harding 对How to scroll HTML page to given anchor 的回答？给了我实验所需的想法，并为我的答案提供了方便。

    • 4
  2. Best Answer

    您可以简单地执行一些 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()
    • 3

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

    不幸的是，由于语法限制，无法在 superuser.com 中创建小书签链接。所以你需要手动添加它。

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

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

    在此处输入图像描述

    然后将新创建的小书签放在栏中的某个位置，这样您就可以在需要时单击它。

    • 0

相关问题