如何链接到页面的一部分？ （哈希？）

Question

如何链接（使用 ）以便浏览器转到目标页面上的某些副标题而不是顶部？

Answer 1

如果有任何带有 id 的标签（例如

>），那么您只需附加 #foo 到 URL。否则，您不能任意链接到页面的某些部分。

下面是一个完整的示例：Jump to #foo on page.html

同一页面示例： 跳转到同一页面上的#foo

它被称为 URI 片段。

Answer 2

您使用锚点和哈希值。例如：

链接目标：

 <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>

Answer 3

2020 年 3 月 12 日，WICG 添加了一份关于文本片段的草稿，现在您可以像搜索页面上的文本一样链接到该文本，只需将以下内容添加到哈希

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

Chrome 版本 81.0.4044.138 上的工作示例：

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

Answer 4

只需将带有元素 ID 的哈希附加到 URL 即可。例如

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

，

http://mysite.com/#about

所以链接看起来像：

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

或者只是

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

Answer 5

具体方法如下：

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

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

Answer 6

您有两种选择：

您可以按如下方式在文档中放置锚点：

<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>

Answer 7

另外，您可以在框架或 iframe src 属性中使用它。

如果该 id 存在于文档中，那么

<iframe src="page.html#content">

会将页面带到该点。

Answer 8

前提是网页上任何元素都具有 id 属性。
人们可以简单地链接/跳转到标签引用的元素。

在同一页面内：

<div id="markOne"> ..... </div> 
   ......
<a href="#markOne">Jump to markOne</a> 

其他页面：

<div id="http://randomwebsite.com/mypage.html#markOne"> 
  Jumps to the markOne element in the mypage of the linked website
</div>

目标不一定有锚元素。

你可以去检查这个fiddle。