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

Question

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

Answer 1

如果有<a name="foo">标记或带有id的任何标记（例如<div id="foo"＆gt;），那么您只需将#foo附加到网址即可。否则，您无法任意链接到页面的某些部分。

以下是一个完整的示例：<a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

在同一页面上链接内容示例：<a href="#foo">Jump to #foo on same page</a>

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

只需将带有元素ID的哈希附加到URL即可。 E.g。

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

和

http://mysite.com/#about

所以链接看起来像：

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

或只是

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

Answer 4

以下是：

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

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

Answer 5

2020年3月12日，WICG为 Text Fragments 添加了草稿，现在您可以通过添加以下内容来链接到页面上的文本，就像在搜索文本一样到哈希

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

在Chrome Version 81.0.4044.138上的工作示例：

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

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

提供了任何元素在网页上都具有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。