web-dev-qa-db-ja.com

アンカータグのハッシュ

ページを読み込み、読み込まれたページの特定の場所で開くにはどうすればよいですか？

たとえば、3つのリンクがあるpage1.htmlがあるとします

<a href="page2.html#1">1</a>
<a href="page2.html#2">2</a>
<a href="page2.html#3">3</a>

page2.htmlでは、ページにもこれらのリンクがあります。

<a href="page3.html#1">1</a>
<a href="page3.html#2">2</a>
<a href="page3.html#3">3</a>

#2から#3またはpage1.htmlリンクをクリックすると、#2および#3がオフになっていても、常にページの上部で開きますpage2.htmlの画面を表示するには、下にスクロールする必要があります。

何が間違っているのかわかりません。

htmlanchor
20
oshirowanen

次のようにpage2.htmlにnamedアンカーを配置する必要があります。

<a name="1"></a>
…
<a name="2"></a>
…
<a name="3"></a>

–これはHTML5の前でした。現在、idの代わりにnameを使用しています。

36
Konrad Rudolph

「ジャンプ」する要素にIDを追加する必要があります。

たとえば、あなたが持っている場合

<div id="part1">
  <p>Blah blah blah</p>
</div>

<div id="part2">
  <p>Blah blah blah</p>
</div>

<div id="part3">
  <p>Blah blah blah</p>
</div>

そして、それらはすべてpage.htmlにあります

次に、page.html#part1、page.html#part2などにリンクすると、ページの正しい部分にジャンプします

更新：

Name属性も使用できますが、idを使用することを好みます。これは、何でもIDを持つことができるが、必ずしも名前を持つ必要がないためです。例えば、nameはHTML 5の 'a'タグの有効な属性ではないと思います。また、id = "part1"を持つ要素とname = "part1"を持つ別の要素がある場合、idを持つ要素は優越します。混乱を避けるために、全体を通して1つの方法に固執します。これについてもう少し議論があります here

22
Addsy

targetページのアンカータグでname属性またはid属性を使用すると、望ましい結果が得られます。

<a name="someLocation" id="someLocation">SomeText</a>

XHTML 1.1の規則として、アンカータグのname属性はid属性に置き換えられました。 XHTML 1.0のコンテキストでは、name属性は非推奨と見なされます。

この回答を参照 アンカータグの変更に関する関連する議論。

要約すると、互換性の理由から、多くの人が同じ要素内でid属性とname属性の両方を使用することを提案しています。この場合、アンカータグ。

W3C標準 推奨（該当するすべての要素に関して）：

Id属性とname属性は同じ名前空間を共有します。これは、同じドキュメントで同じ名前のアンカーを両方とも定義できないことを意味します。両方の属性を使用して、A、APPLET、FORM、FRAME、IFRAME、IMG、およびMAP要素の要素の一意の識別子を指定することができます。単一の要素で両方の属性を使用する場合、それらの値は同一でなければなりません。

重複をおologiesび申し上げますが、ベストアンサーについてコメントする評判はありません。

7
Tony Fiorentini

この投稿はまだ見つかっているため、更新を追加したいと思います。

<a href="#jumppoint">goto '#jumppoint'</a>

以下にジャンプします：

<div id="jumppoint">  <!-- name="" does not work here on modern browsers -->
   <h2>here</h2>
</div>

そして：

<a name="jumppoint" />
<h2>here</h2>
4
BananaAcid

アンカーに名前を付けるか、要素へのリンクを配置します。

www.yoursite/index.html＃contentスクロールすると、<div id="content">存在する場合、または<div name="content">。

1
monsieur_h

セクションにセクション名またはid 1、2、および3を割り当てる必要があります。そうすれば機能します。

0
Ovais Khatri