我如何链接到一个页面的一部分?(哈希?)

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

438576 次浏览
小开
最佳答案

如果有任何带有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片段。

小开

你有两个选择:

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

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

只需将一个带有元素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为< a href = " https://wicg.github。io/ScrollToTextFragment/# indication -the- Text -match" rel="noreferrer">文本片段 . io/ScrollToTextFragment/# indication -the- Text -match" rel="noreferrer">添加了一个草案，现在你可以链接到页面上的文本，就像你在搜索它一样，将以下内容添加到散列中

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

Chrome Version 81.0.4044.138的工作示例:

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

小开

如果网页上的任何元素都有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>

目标不一定有锚元素。

你可以去检查这个小提琴。


提交答案