Question

如果没有html代码中的锚点，有没有办法书签或链接到HTML页面（我不是作者）？

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

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

Answer 1

您只需要在元素上使用相应的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。

Answer 2

现在是2020年，现在WICG为 Text Fragments 起草了一份草案，现在您可以链接到页面上的文本，就像通过添加跟随哈希

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

在Chrome Version 81.0.4044.138上的工作示例：

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

Answer 3

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

现在是 2020 年，现在 WICG 有 Text Fragments 的草稿，现在您可以通过添加percent-encoded 引用这样的 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 进入地址栏，和 (3) 点击 Enter。不知道为什么 Google 搜索不断在结果中提供这样的链接（例如，a link to Azure Vault）}

支持

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

Answer 4

如果其他一切都失败了，你可以使用从window.location获取查询，使用jQuery获取DOM元素，询问它的位置并scrollTop移动到那里（参见jQuery scroll to element ）

Answer 5

Chrome扩展程序 Any Link 完全可以满足您的需求。

它使您只需3个步骤即可创建指向任何网页中任何选定文本的链接：

选择要链接/突出显示的文本
右键单击以显示上下文菜单
点击link to text菜单项。

指向文本的链接将在后台生成，并立即复制到剪贴板，然后您可以将链接粘贴到任何位置或使用该链接制作书签。

您可以在此处找到扩展名： https://chrome.google.com/webstore/detail/any-link-safereliable-lin/mpflpgaobfpjcpefkdnpalfdodifkkgc

Answer 6

Firefox扩展程序＆＃34; Web Marker＆＃34;完全符合你的要求。

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

您可以在此处找到其源代码和文档：

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

Answer 7

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

这是Firefox的WebExtension，部分实现了链接格式（允许您根据选择“创建”链接，当然也可以打开这样的链接，突出显示正确的选择）：

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

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

其源代码可用here。

Answer 8

如果页面支持嵌入为 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>

Answer 9

以防万一有人还在寻找解决方案... firefox的AnchorMe插件为我解决了这个问题。 Ctrl +双击所需的目的地，然后瞧瞧。

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

9 个答案:

支持