如何创建指向网页上特定位置的链接？

Question

是否可以创建指向网页上特定滚动位置的超链接？例如，我想创建一个指向http://www.stackoverflow.com/的链接，但页面向下滚动 100 像素。

Answer 1

链接到页面内某处的香草方式是通过页面中已经存在的锚点。

这可以使用<a>…</a>标签创建。请注意，“锚点”（上图）中指定的链接#h-12.2位于末尾。这对应于<a id="h-12.2">12.2</a>嵌入在形成页面的 HTML 中，单击时会将页面视图重新定位到此锚点。

请注意，在 HTML5 之前，该name属性在锚标记中使用，但不再受支持，id应在其位置使用该属性（参考）。这也意味着您可以将任何元素用作锚标记，而不仅限于该<a>元素。

Answer 2

与 Paul 的回答类似，您还可以链接到 HTML 文档中第一次出现的标签 ID。但这不会是确切的像素数。

例如，链接/滚动到此页面的问题或答案。

Answer 3

尝试右键单击并检查页面上的元素。你会找到<a>标签，那些是锚点。

然后取出<第一个和最后一个之前的，a这样它们就不会显示为链接。当它显示下面的预览时，您实际上可以在响应框中写入时看到效果。

a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>

和

a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>

正如您所看到的，唯一的区别是在最后一个锚点以英镑 ( #) 符号命名。后面的名称>用于链接如何读取给用户。

在这种情况下，“问题标题”读作“问题”，答案恰好相同。

那么以下应该链接到迈克的评论。因为他们的锚点是382094

为了澄清，您可以简单地找到锚点并#在链接之后添加。

https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header

https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers

https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079

这些都将带您到同一页面上的不同位置。

Answer 4

您可以使用jQuery scrollTo 插件滚动到给定位置。如果您查看其演示页面，您会发现该插件具有许多不同的选项，包括滚动到某个位置。不过，这意味着您必须控制目标的 JavaScript，因此这可能不适合指向外部站点的链接。