web-dev-qa-db-ja.com

HTMLで脚注へのリンクを作成するにはどうすればよいですか？

例えば：

これが私のコンテンツの本文です。この行に脚注リンクがあります[1]。次に、もう少しコンテンツがあります。その中には興味深いものもあり、脚注もいくつかあります[2]。

[1]これが私の最初の脚注です。

[2]別の脚注。

したがって、[[1]]リンクをクリックすると、Webページは最初の脚注参照に移動します。これをHTMLで正確に達成するにはどうすればよいですか？

htmlsyntax
29
Ray Vega

コンテナに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>
46
Peter Boughton

最初に、各脚注の前に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>
3
Adrian Dunston

あなたのケースでは、リンクとフッターにそれぞれa-hrefタグとa-nameタグを使用してこれを行うのがおそらく最善です。

DOM要素にスクロールする一般的なケースでは、 jQueryプラグイン があります。ただし、パフォーマンスに問題がある場合は、手動で実行することをお勧めします。これには2つのステップが含まれます。

  1. スクロールする要素の位置を見つける。
  2. その位置までスクロールします。

quirksmode は、前者の背後にあるメカニズムをよく説明しています。これが私の好ましい解決策です：

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

Nullから0へのキャストを使用しますが、これは一部のサークルでは適切なエチケットではありませんが、私はそれが好きです:) 2番目の部分はwindow.scrollを使用しています。したがって、残りの解決策は次のとおりです。

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

出来上がり！

1
Andrey Fedorov

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>

このように、参照が以下の正しい順序でリストされている限り、上と下に番号を書く必要はありません。

1
Anders

すべての脚注にアンカータグを設定する必要があります。次のようなものをそれらにプレフィックスすることでそれができるはずです：
<a name = "FOOTNOTE-1"> [1] </ a>

次に、ページの本文で、次のような脚注にリンクします。
<a href = "＃FOOTNOTE-1"> [1] </ a>
（nameとhref属性）

基本的に、Aタグの名前を設定すると、＃NAME-USED-IN-TAGにリンクすることでアクセスできます。


http://www.w3schools.com/HTML/html_links.asp に詳細があります。

1
Scott Swezey

名前付きアンカーを使用したアンカータグ

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

0
Bloodhound

アンカータグでブックマークを使用...

    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>
0
Paul Dixon

これが私のコンテンツの本文です。この行に脚注リンクがあります[1]。次に、もう少しコンテンツがあります。その中には興味深いものもあり、脚注もいくつかあります[2]。

[1]これが私の最初の脚注です。

[2]別の脚注。

<a href =＃tag>テキストを実行</ a>

脚注：<a name = "tag">テキスト</ a>

すべてスペースなし。参照： http://www.w3schools.com/HTML/html_links.asp

0
zxcv

<a name="1">脚注</a>

ブラブラ

脚注に<a href="#1">移動</a>します。

0
Sklivvz