【发布时间】：2011-02-19 13:53:42
【问题描述】：
您如何链接（使用<a>）以使浏览器转到目标页面上的某些子标题而不是顶部？
【问题讨论】：
【发布时间】：2011-02-19 13:53:42
【问题描述】：
如果有任何带有id 的标签（例如，<div id="foo">），那么您只需将#foo 附加到 URL。否则，您不能随意链接到页面的某些部分。
这是一个完整的例子：<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>
它被称为URI fragment。
【讨论】：
-
那么你是用完整的例子还是同页的例子？完整的例子不是一回事吗？
-
如果我们有一个带有 url 的宁静页面：
domain.com/#home?page=1如何在 href 中使用 id？ -
@irajjelodari 你会把哈希放在最后：
domain.com/?page=1#home -
我必须在网址中使用 2 个主题标签，例如：
example.com/#RouteName?page=1#ID。一种用于路由，另一种用于在当前页面内导航。最后我使用 html5 模式的 URL 来删除路由标签；）@tomsmeding -
@Daniel先生，我也有类似的情况，如果
#foo元素处于隐藏状态怎么办？
你有两个选择：
您可以按如下方式在文档中放置锚点：
<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>
【讨论】：
方法如下：
<a href="#go_middle">Go Middle</a>
<div id="go_middle">Hello There</div>
【讨论】：
您使用锚点和散列。例如：
链接目标：
<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>
【讨论】：
-
broser 也会跳转到任何id为
name_of_target的元素。您不需要使用<a>标记作为目标。所以另一个目标可能是<h3 id='name_of_target'>Content</h3>。 -
注意这在 HTML5 中已经过时了。
-
只是为了澄清蒂姆的评论，片段链接和空的“a”标签在 HTML5 中仍然是最新的。不推荐使用“name”标签，取而代之的是“id”。 html.spec.whatwg.org/multipage/browsing-the-web.html#navigate
只需将带有元素 ID 的哈希附加到 URL。例如
<div id="about"></div>
和
http://mysite.com/#about
所以链接看起来像：
<a href="http://mysite.com/#about">About</a>
或者只是
<a href="#about">About</a>
【讨论】：
2020 年 3 月 12 日，WICG 为 Text Fragments 添加了草稿，现在您可以通过在哈希
#:~:text=<Text To Link to>
Chrome Version 81.0.4044.138 上的工作示例：
Click on this link应该重新加载页面并突出显示链接的文本
【讨论】：
只要网页上的任何元素都具有 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。
【讨论】：