你如何链接(与<a>),使浏览器去到目标页面上的特定子标题,而不是顶部?


当前回答

2020年3月12日,WICG为文本片段添加了一个草案,现在你可以链接到页面上的文本,就像你在搜索它一样,将以下内容添加到散列中

#:~:text=<链接到>的文本

Chrome Version 81.0.4044.138运行示例:

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

其他回答

只需将一个带有元素ID的散列附加到URL。如。

<div id="about"></div>

and

http://mysite.com/#about

所以链接看起来是这样的:

<a href="http://mysite.com/#about">About</a>

或者只是

<a href="#about">About</a>

使用锚和散列。例如:

链接目标:

 <a name="name_of_target">Content</a>

链接到目标:

 <a href="#name_of_target">Link Text</a>

或者,如果从不同的页面链接:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

2020年3月12日,WICG为文本片段添加了一个草案,现在你可以链接到页面上的文本,就像你在搜索它一样,将以下内容添加到散列中

#:~:text=<链接到>的文本

Chrome Version 81.0.4044.138运行示例:

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

以下是如何做到的:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

你有两个选择:

你可以在你的文档中放置一个锚,如下所示:

<a name="ref"></a>

或者给任意HTML元素一个id:

<h1 id="ref">Heading</h1>

然后只需将散列#ref附加到链接的URL,以跳转到所需的引用。例子:

<a href="document.html#ref">Jump to ref in document.html</a>