ページ内リンクを自動作成する

各セクションの見出しなどを対象に、ページ内リンク（ショートカット）を自動作成する。

デモページを表示

CSS

補足

• ページ内リンクを追加するブロック要素やリンクのスタイルを設定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、h3 要素をアンカーポイントにしている（そのため id 属性の設定が必要）。
• スムーズ・スクロールさせない場合、19行目以降は不要。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 5行目：リンクを追加するブロック要素を用意しておく。
• 7行目：アンカーポイントの h3 要素に id 属性を設定しておく。