【HTML】ページ内リンク(アンカーリンク)備忘録

ページ内リンクとは?
ページ内の特定の位置へジャンプするためのリンク。
主に長いページのセクション間ナビゲーションなどに使われる。

基本の書き方
リンク先に id を設定【html】
<h2 id="about">このページについて</h2>
リンク元で #id を指定【html】
<a href="#about">このページについてへジャンプ</a>

ページ内リンクの動作
  • 同じページ内で #id名 にジャンプ
  • ブラウザが自動的に該当要素の位置までスクロール

注意点
  • id の重複禁止:同一ページ内で同じ id を複数使うと正しく動作しない
  • スペース禁止:id にはスペースを含めない(例:id="about-us")

スムーススクロールの実装(CSSのみ)
html {
  scroll-behavior: smooth;
}
これを <style> タグまたは CSS ファイルに追加すると、クリック時にスムーズにスクロールする。

以上