ふつうのリンクは、別のページへ飛ぶものでした。じつはリンクは、同じページの中の“あの場所”へも飛べます。長い1枚のページで「メニューを押すと、その場所までスーッとスクロール」——あれです。使うのは、いつもの <a> と、新しい相棒 id（アイディー）。
まずは飛び先に目印をつける
ジャンプしたい場所のタグに、id="名前" という目印をつけます。
<h2 id="profile">プロフィール</h2>id は、そのページの中でかぶらない名札。「この見出しにはprofileっていう名前をつけたよ」という宣言です。名前はローマ字で、自分の好きに決められます。
その目印へ飛ぶ
あとは、いつものリンクの href に、目印の名前を # 付きで書くだけ。
<a href="#profile">プロフィールへ</a>| 書くもの | 意味 |
|---|---|
id="profile" | 飛び先の目印。ページの中でかぶらない名前 |
href="#profile" | その目印へ飛ぶリンク。頭に # をつける |
この「プロフィールへ」を押すと、id="profile" をつけた見出しの場所まで、画面がスクロールします。ページの上のほうにメニューとして並べれば、押した先へひとっ飛びできる目次の完成です。
「上に戻る」ボタンを作る
長いページの下によくある「▲ 上に戻る」も、同じしくみで作れます。ページの一番上のタグに目印をつけて、そこへ飛ばすだけ。
<header id="top">
<h1>わたしのページ</h1>
</header>
...（長い本文）...
<a href="#top">▲ 上に戻る</a>ページの下から #top を押せば、一気にてっぺんまで戻れます。
このレッスンのまとめ
- 飛び先に
id="名前"、リンクにhref="#名前"をつける - 頭の
#が「同じページの中へ」の合図（忘れると別ページ扱い） 別ページ.html#名前で、よそのページの途中にも飛べる
これが、/goal のいちばん上にあるメニューの正体。
:::
