有没有办法书签或链接到没有锚点的页面的一部分？

Question

有没有办法书签或链接到HTML页面(我不是作者)没有在HTML代码中的锚？

我希望页面在从书签或超链接访问时向下滚动到特定部分,即使目标页面中没有锚标记也是如此.

注意:目标页面的锚标记为"foo",然后书签http:/...hello.html#foo不仅会将用户带到hello.html,还会自动向下滚动到页面的某个部分,以便锚点标记"foo"位于顶部屏幕

Answer 1

现在是 2020 年，WICG 有一个Text Fragments草案，现在您可以通过将以下内容添加到哈希中来链接到页面上的文本，就像您在搜索它一样

#:~:text=<Text To Link to>

工作示例Chrome Version 81.0.4044.138：

单击此链接应重新加载页面并突出显示链接的文本

Answer 2

您只需要在元素上具有适当的id属性即可像书签一样使用它...

<a href="#test">Test</a>

...

<p id="test">Hello world</p>

请参阅W3C规范:具有该id属性的锚点

较旧的规范也允许基于name属性进行导航,但此属性已从最新的HTML规范中删除(但如果存在name属性,则可以以与id属性相同的方式使用).

如果您没有要导航到的属性id或name属性,则无法导航到页面中的特定点,只能导航到页面本身.在这种情况下,您可能需要引用相关信息并提供带有链接的引文,或者可能询问作者是否会添加id.

Answer 3

^{这是@AbderrahmaneTAHRIJOUTI 答案的副本，但更新了一些额外信息。}

现在是 2020 年，现在 WICG 发布了一份关于文本片段的草案，现在您可以通过向 URL添加百分比编码的引用来链接到页面上的文本，就好像您正在搜索它一样：

#:~:text=<percent-encoded-text-quoted-from-site>

例如，此链接突出显示了规范中的语法。

还可以通过使用 & 符号 ( )链接查询参数来突出显示多个部分：&

#:~:text=<quote-1>&text=<quote-2>

例如，请参阅规范的这些要点。

如果引用较长，甚至可以设置范围（至少在 Chrome 中）：

#:~:text=<begin-text>,<end-text>

例如，突出显示规范中的整个段落。

^{由于某种原因，在 Chrome 89.0.4389.90 中，上述链接仅在以下情况下才有效：(1) 单击它们，(2) 通过单击或按 转到地址栏F6，以及 (3) 点击Enter。不知道为什么当 Google 搜索不断在结果中提供这样的开箱即用的链接（例如，指向 Azure Vault 的链接）时}

支持

它仍然不稳定，但大多数主要浏览器都支持它（Firefox 除外......）。要查看当前的收养状态，请查看https://caniuse.com/?search=%3A~%3A