如何在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上有一个页面 footnotes on the web (尽管它建议你使用 sidenotes 我认为脚注比脚注更重要 可使用的 ,带有指向脚注的链接,脚注后面是返回文本的链接,我怀疑使用 屏幕阅读器 ).

来自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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617;</a>
</p>

不过,我不确定屏幕阅读器会如何处理这个实体。从Grubber帖子的评论链接到 Bob Eastern's post on the accessibility of footnotes 这表明它不可读,尽管那是几年前的事了,我希望屏幕阅读器现在已经有所改进。为了便于访问,可能值得使用文本锚点,如“返回文本”,或者将其放在链接的标题属性中。在原始脚注上加一个可能也是值得的,尽管我不知道屏幕阅读器会如何处理。

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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617;</a>
</p>

(我只是猜测这里的可访问性问题,但由于我提到的任何一篇文章都没有提出这个问题,我认为值得一提。如果有人能就这个问题发表更权威的意见,我很想听听。)

首先,你进去,在每个脚注前面放一个带有name属性的锚点标签。

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

Peter Boughton的答案很好,但如果你在“ol”(有序列表)中声明为“li”(列表项),而不是将脚注声明为“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>.

<h2>References</h2>
<ol>
    <li id="footnote-1">Here is my first footnote.</li>
    <li id="footnote-2">Another footnote.</li>
</ol>

这样,就不需要在上面和下面写数字了。..只要参考文献按以下正确顺序列出。

您需要为所有脚注设置锚点标签。在它们前面加上这样的前缀就可以了:
<a name=“FOOTNOTE-1”>[1]</a>

然后在页面正文中,链接到脚注,如下所示:
<a href=“#FOOTNOTE-1”>[1]</a>
(注意使用 名称 vs 水平参考 属性)

本质上,每当您设置a标签的名称时,您都可以通过链接到#name-USED-IN-tag来访问它。

http://www.w3schools.com/HTML/html_links.asp 有更多信息。

对于您的情况,最好在链接和页脚中分别使用a-href标签和a-name标签。

在滚动到DOM元素的一般情况下,有一个 jQuery plugin 。但如果性能有问题,我建议手动操作。这涉及两个步骤:

1. 查找要滚动到的元素的位置。
2. 滚动到那个位置。

quirksmode 很好地解释了前者背后的机制。以下是我首选的解决方案:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

它使用从null到0的强制转换,这在某些圈子里是不恰当的礼仪,但我喜欢它:)第二部分使用 window.scroll 因此,解决方案的其余部分是:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

瞧!

使用命名锚点的锚点标签

http://www.w3schools.com/HTML/html_links.asp

在锚点标签中使用书签。..

    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名称=“1”>脚注</a>

等等等等

<a href=“#1”>去</a>到脚注。