有没有办法在没有锚的情况下为页面的某个部分添加书签或链接？答案

【问题标题】：Is there a way to bookmark or link to a section of a page without an anchor?有没有办法在没有锚的情况下为页面的某个部分添加书签或链接？
【发布时间】：2011-12-20 11:06:27
【问题描述】：

有没有办法在 HTML 代码中没有锚点的情况下为 HTML 页面（我不是该页面的作者）添加书签或链接？

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

注意：目标页面有一个锚标记为“foo”，然后像http:/...hello.html#foo 这样的书签不仅会将用户带到hello.html，还会自动向下滚动到页面，以便锚标记“foo”位于屏幕顶部。

【问题讨论】：

如果您要在新窗口中加载页面。您可以使用 javascript 打开它并将其引用向下滚动，但是如果页面发生更改，滚动计数也会发生变化。
谢谢。如果在新选项卡中打开它可以完成（即使使用javascript也可以，但它不应该是弹出窗口）。页面非常静态，不会改变。你的意思是我可以设置一个数字作为向下滚动页面的长度？我会很感激任何例子。
查看我原来的想法后，如果Link在另一个域window.scrollTo将不允许XSS
stackoverflow.com/questions/6049923/…

标签： html hyperlink anchor bookmarks

【解决方案1】：

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

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

Chrome Version 81.0.4044.138 上的工作示例：

Click on this link应该重新加载页面并突出显示链接的文本

【讨论】：

不幸的是，它更像是一个锚而不是突出显示的搜索。它只查找并突出显示第一个实例。例如try with the word page，这里有多个实例。所以我现在可以成为一个真正的笨蛋，并将文本“点击此链接”作为对问题的评论，然后打破你的例子。
目前似乎也只是 Chrome。
请注意，由于安全限制，您必须在您的<a> 元素中包含rel="noopener" 属性，以使其在链接中起作用。
@toraritte 感谢您添加的编辑，但我认为简单的答案更容易理解，并展示了一个我想保留的工作示例。我正在尝试获取您的编辑并将它们添加为更详细和科学的Read More。您也可以将其发布为自己的答案，我可以链接到它:-)
@AbderrahmaneTAHRIJOUTI 知道了，感谢您的提醒！我将把它作为答案发布，但是当您将 Read more 更多部分添加到您的部分时，您会对此发表评论吗？我不想发布多余的答案，但我发现了这些花絮，而且这个线程似乎是保存它们的最佳位置 - 所以你的答案也有它们，我的将是多余的，并将删除它。再次感谢！

【解决方案2】：

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

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

...

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

见W3C specification: Anchors with the id attribute

较早的规范也允许基于name 属性的导航，但该属性已从最新的HTML 规范中删除（但如果有name 属性，它可以以与id 相同的方式使用属性）。

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

【讨论】：

这应该适用于任何现代浏览器吗？我看到 (stackoverflow.com/questions/484719/html-anchors-with-name-or-id/…) NS4 不支持它（好吧，谁在乎）但是 IE6 呢？
它适用于 IE6。（但你不应该支持任何你无法测试的东西）
有没有什么技巧可以链接到没有ID的元素？
我想链接到页面中不受我控制且既没有“id”也没有“name”的部分。参见例如codinghorror.com/blog/2012/07/new-programming-jargon.html 的各个部分我想不出如何使它起作用...
我同意。请您在答案中添加一些关于此的内容吗？ q 明确指出“我不是作者”，但最好的答案（你的）没有说明如果没有“name”和“id”属性该怎么办。

【解决方案3】：

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

现在是 2020 年，现在有一个由 WICG 为 Text Fragments 撰写的草稿，现在您可以通过添加 @987654323 来链接到页面上的文本，就好像您正在搜索它一样@ 引用 URL 如下：

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

例如，this link 突出显示规范中的语法。

也可以通过chaining query parameters with ampersand (&)突出显示多个部分：

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

例如，请参阅these highlights to the spec。

即使是范围，也可以设置更长的引号（至少在 Chrome 中）：

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

例如，highlighting an entire paragraph in the spec。

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

支持

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

【讨论】：

谢谢！也不适用于 Safari 或 Opera。（每个 CanIUse 链接）Safari 拥有巨大的用户足迹（18%）。努力工作：covid19criticalcare.com/covid-19-protocols/i-recover-protocol/…>
澄清：本质上，它只适用于基于 Chromium 的浏览器。在 Safari 或 Opera 中也不起作用（好吧，3 种中的 1 种起作用）。（每个 CanIUse 链接）

【解决方案4】：

现代浏览器会尝试滚动到 ID 与 URL 的哈希部分匹配的元素（即，如果您有 <h1 id="foo">，那么 #foo 会带您到达那里）。

如果一切都失败了，你可以使用 jQuery。使用 window.location.hash 从文档 URL 中获取哈希部分。然后，您可以在 JavaScript 中解释它以确定页面中的元素。

使用scrollTop 移动到那里（参见Scroll to an element with jQuery）。

另见：https://api.jquery.com/scrolltop/

【讨论】：

你能举个例子吗？
“可以使用获取查询” 附近似乎有些不对劲。你能解决它吗？

【解决方案5】：

Firefox 扩展“Web Marker”完全符合您的要求。

https://addons.mozilla.org/en-US/firefox/addon/web-marker/

你可以在这里找到它的源代码和文档：

http://liveurls.mozdev.org/tech.html

【讨论】：

谢谢，但截至今天网页显示“与 Firefox Quantum 不兼容”。它还说它是“6 年前最后一次更新（2012 年 2 月 15 日）” :(

【解决方案6】：

有一个相对较新的W3C Working Group Note on Selectors and States 允许链接到选定的文本。

这是一个部分实现链接格式的 Firefox 网络扩展（允许您根据选择“创建”链接，并且显然打开这样的链接，突出显示正确的选择）：

https://addons.mozilla.org/en-US/firefox/addon/precise-links/

截至 2019 年，它似乎运行良好。

它的源代码在here.

【讨论】：

【解决方案7】：

如果页面支持作为 iframe 嵌入，您可以链接到嵌入它的文档，然后自动滚动该文档。问题是我们无法获取页面的高度，所以我们只是劫持了滚动事件，以便在接近底部时使页面更高：

data:text/html,<html><body style="margin:0; padding:0;"><iframe id='i' src='http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0' width=100% frameborder=0 margin=0 scrolling=no style="height: calc(100vh + 170px + 200px);"></iframe></body><script>window.scrollTo(0, 170);window.onscroll = function(e) {if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {document.getElementById('i').style.height = window.innerHeight + window.scrollY + 200;}};</script></html>

【讨论】：

它对我不起作用，但是通过额外的 scrollTo 和超时，我让它工作了。太长的评论和编辑队列已满，所以不要编辑你的答案。 :-(。我猜嵌入的 PDF 是必要的。
这是修改后的位：src='covid19criticalcare.com/covid-19-protocols/i-recover-protocol' width=100% frameborder=0 margin=0 scrolling=no style="height: calc(100vh + 170px + 200px);">

【解决方案8】：

Firefox 的 AnchorMe 插件刚刚为我解决了这个问题。 Ctrl + 双击您想要的目的地，然后瞧。

【讨论】：