ページの一部にリンクするにはどうすればよいですか?(ハッシュ?)


210

<a>ブラウザが上部ではなくターゲットページの特定の小見出しに移動するように(を使用して)どのようにリンクしますか?

回答:


275

ある場合<a name="foo">と、タグまたは任意のタグid(例えば、<div id="foo">)、そして、あなたは簡単に追加できる#fooURLに。それ以外の場合、ページの一部に任意にリンクすることはできません。

以下は完全な例です。 <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

同じページのコンテンツをリンクする例: <a href="#foo">Jump to #foo on same page</a>



完全な例を使用しますか、それとも同じページの例を使用しますか?完全な例は同じではありませんか?
akantoword 2016年

2
次のようなURLのある安らかなページがある場合:domain.com/#home?page=1hrefでIDを使用する方法は?
iraj jelodari

1
@irajjelodariハッシュを最後に配置しますdomain.com/?page=1#home
。– tomsmeding

次のようなURLで2つのハッシュタグを使用する必要がありましたexample.com/#RouteName?page=1#ID。1つはルーティング用、もう1つは現在のページ内のナビゲーション用です。最後に、ルートハッシュタグを削除するためにURLのhtml5モードを使用しました;)@tomsmeding
iraj jelodari

41

アンカーとハッシュを使用します。例えば:

リンクのターゲット:

 <a name="name_of_target">Content</a>

ターゲットへのリンク:

 <a href="#name_of_target">Link Text</a>

または、別のページからリンクしている場合:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

8
また、broserはidを持つ任意の要素にジャンプしますname_of_target<a>ターゲットとしてタグを使用する必要はありません。したがって、別のターゲットが可能性があります<h3 id='name_of_target'>Content</h3>
キリル14年

8
これはHTML5では廃止されていることに注意してください。
Tim

32

要素のIDを含むハッシュをURLに追加するだけです。例えば

<div id="about"></div>

そして

http://mysite.com/#about

したがって、リンクは次のようになります。

<a href="http://mysite.com/#about">About</a>

あるいは単に

<a href="#about">About</a>

21

方法は次のとおりです。

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

2
あなたは何ですか?</a>開場後に閉会しました<div ...>-ここで何をしようとしているのか本当にわかりません。
ドミニクロジャー

1
リンクをコピーして下に貼り付け、divを閉じるのを忘れました。とにかく、ありがとう。
Sarfraz、

10

次の2つのオプションがあります。

次のように、ドキュメントにアンカーを配置できます。

<a name="ref"></a>

または、任意のHTML要素にIDを指定します。

<h1 id="ref">Heading</h1>

次に#ref、リンクのURLにハッシュを追加して、目的の参照にジャンプします。例:

<a href="document.html#ref">Jump to ref in document.html</a>

6

2020年3月12日、ドラフトがテキストフラグメント用にWICGによって追加されました。ハッシュに以下を追加することで、ページを検索しているようにテキストにリンクできます。

#:~:text=<Text To Link to>

の作業例Chrome Version 81.0.4044.138

このリンクをクリックしてくださいページをリロードし、リンクのテキストを強調表示する必要があります

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.