如何创建 HTML 脚注的链接？
https://stackoverflow.com/questions/66964
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
例如：
这是我的内容的主体。我有一个脚注链接[1]。然后，我有更多内容。其中一些很有趣，并且还有一些脚注[2]。
[1] 这是我的第一个脚注。
[2] 另一个脚注。
因此，如果我单击“[1]”链接，它会将网页定向到第一个脚注引用，依此类推。我到底如何在 HTML 中实现这一点？
解决方案
给容器一个id，然后使用 # 来引用该 ID。
例如
<p>This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.</p>
<p id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>其他提示
最好提供从脚注返回到引用位置的链接（假设存在 1:1 关系）。这很有用，因为后退按钮将使用户返回到之前所在的滚动位置，让读者在文本中找到他们的位置。单击返回文本中引用脚注的位置的链接会将文本置于窗口顶部，使读者可以轻松地从上次中断的地方继续阅读。
Quirksmode 有一个页面 网络上的脚注 （虽然它建议你使用 旁注 我认为脚注比脚注更重要 无障碍, ，带有指向脚注的链接，脚注后跟一个返回文本的链接，我怀疑使用 屏幕阅读器).
quirksmode 页面中的链接之一建议在链接回的脚注文本后面有一个箭头 ↩，并使用实体 ↩为了这。
例如。：
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote. <a href="#footnote-1-ref">↩</a>
</p>
<p id="footnote-2">
2. Another footnote. <a href="#footnote-2-ref">↩</a>
</p>
我不确定屏幕阅读器将如何处理该实体。格鲁伯帖子评论中的链接是 Bob Eastern 关于脚注可访问性的帖子 这表明它没有被阅读，尽管那是几年前的事了，我希望屏幕阅读器现在已经有所改进。为了可访问性，可能值得使用文本锚点，例如“返回文本”，或者可能将其放在链接的标题属性中。尽管我不知道屏幕阅读器将如何处理它，但也可能值得在原始脚注上添加一个。
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1" title="link to footnote">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2" title="link to footnote">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote.
<a href="#footnote-1-ref" title="return to text">↩</a>
</p>
<p id="footnote-2">
2. Another footnote.
<a href="#footnote-2-ref" title="return to text">↩</a>
</p>
（我只是猜测这里的可访问性问题，但由于我提到的任何文章中都没有提出这个问题，所以我认为值得提出。如果有人能在这个问题上更有权威地发言，我有兴趣听听。）
首先，您进入并在每个脚注前面放置一个带有名称属性的锚标记。
<a name="footnote1">Footnote 1</a>
<div>blah blah about stuff</div>
该锚标记不会是链接。它只是页面的一个命名部分。然后，您将脚注标记设为引用该命名部分的标签。要引用页面的指定部分，请使用#号。
<p>So you can see that the candidate lied
<a href="#footnote1">[1]</a>
in his opening address</p>
如果您想从另一个页面链接到该部分，您也可以这样做。只需链接该页面并将部分名称粘贴到其上即可。
<p>For more on that, see
<a href="mypaper.html#footnote1">footnote 1 from my paper</a>
, and you will be amazed.</p>
您需要为所有脚注设置锚标记。用这样的东西作为前缀应该可以做到：
<a name="FOOTNOTE-1">[1]</a>
然后在页面正文中，链接到脚注，如下所示：
<a href="#FOOTNOTE-1">[1]</a>
（注意使用 姓名 与 链接地址 属性）
本质上，每当您设置 A 标记的名称时，您都可以通过链接到 #NAME-USED-IN-TAG 来访问它。
对于您的情况，您最好分别在链接和页脚中使用 a-href 标签和 a-name 标签来执行此操作。
在滚动到 DOM 元素的一般情况下，有一个 jQuery 插件. 。但如果性能是一个问题，我建议手动执行。这涉及两个步骤：
- 查找您要滚动到的元素的位置。
- 滚动到该位置。
怪癖模式 很好地解释了前者背后的机制。这是我的首选解决方案：
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
它使用从 null 到 0 的转换，这在某些圈子里不是正确的礼仪，但我喜欢它:)第二部分使用 window.scroll. 。所以解决方案的其余部分是：
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
瞧！
Peter Boughton 的答案很好，但如果不是将脚注声明为“p”（段落），而是在“ol”（有序列表）内声明为“li”（列表项），效果可能会更好：
This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.
<h2>References</h2>
<ol>
<li id="footnote-1">Here is my first footnote.</li>
<li id="footnote-2">Another footnote.</li>
</ol>
这样，就不需要在上面写数字，在下面写数字......只要参考文献按下面正确的顺序列出即可。
使用命名锚点的锚标记
在锚标签中使用书签...
This is main body of my content. I have a footnote link for this
line <a href="#foot1">[1]</a>. Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a href="#foot2">[2]</a>.
<div>
<a name="foot1">[1]</a> Here is my first footnote.
</div>
<div>
<a name="foot2">[2]</a> Another footnote.
</div>
这是我的内容的主体。我有该行的脚注链接 [1]。然后，我还有一些内容。其中一些很有趣，并且还有一些脚注 [2]。
[1] 这是我的第一个脚注。
[2] 另一个脚注。
执行<a href=#tag>文本</a>
然后在脚注处：<a name="tag">文字</a>
全部没有空格。参考： http://www.w3schools.com/HTML/html_links.asp
<a name="1">脚注</a>
布拉布拉
<a href="#1">转到</a>脚注。
