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

Is there any way to bookmark or link to a section of a page without an anchor?

提问by Neil

Is there any way to bookmark or link to an HTML page (which I am not author of) without having an anchor in the html code ?

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

I want the page to get scrolled down to a particular section when accessed from a bookmark or hyperlink even if there is no anchor tag in the destination page.

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

Note : the destination page has an anchor tag as "foo" then bookmark like http:/...hello.html#foowill not only take the user to hello.html but also automatically scroll down to the section of the page so that the anchore tag "foo" is at the top of the screen

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

回答by Fenton

You only need to have the appropriate id attribute on an element to use it like a bookmark...

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

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

...

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

See the W3C specification: Anchors with the idattribute

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

Older specifications also allowed navigation based on the nameattribute, but this attribute has been removed from the latest HTML specifications (but if there is a nameattribute it may be used in the same way as an idattribute).

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

If there is no idor nameattribute where you wish to navigate to, there is no way of navigating to the specific point within the page, only to the page itself. In this case you may want to quote the pertinent information and supply a citation with a link or perhaps ask the author if they would add an id.

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

回答by Aaron Digulla

If everything else fails, you can use get the query from the window.location, use jQuery to get the DOM element, ask for it's position and scrollTopto move there (see jQuery scroll to element)

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

回答by Gr8Miller

The Chrome extension Any Linkdoes exactly what you want.

Chrome 扩展Any Link完全符合您的要求。

It enables you to create links to any selected texts in any web pages with only 3 steps:

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

1. select the text you want to link/highlight
2. right click to show the context menu
3. click the link to textmenu item.

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

The link to the text will be generated at background and copied to clipboard right away, you can then paste the link anywhere or make a bookmark with the link.

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

You can find the extension here: https://chrome.google.com/webstore/detail/any-link-safereliable-lin/mpflpgaobfpjcpefkdnpalfdodifkkgc

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

回答by aplaice

There is a relatively recent W3C Working Group Note on Selectors and Stateswhich would allow linking to selected text.

有一个相对较新的W3C 工作组关于选择器和状态的说明，它允许链接到选定的文本。

Here is a Firefox webextension partially implementing the link format (allowing you to "create" a link, based on the selection, as well as, obviously, open such a link, highlighting the correct selection):

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

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

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

As of 2019 it seems to work fine.

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

Its source code is available here.

其源代码可在此处获得。

回答by Abderrahmane TAHRI JOUTI

It's the year 2020, and now there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash

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

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

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

Working example on Chrome Version 81.0.4044.138:

工作示例Chrome Version 81.0.4044.138：

Click on this linkShould reload the page and highlight the link's text

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

回答by papapasan

The Firefox extension "Web Marker" does exactly what you want.

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

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

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

You can find its source code and documentation here:

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

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

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