【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 ファイルに追加すると、クリック時にスムーズにスクロールする。
以上