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

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

デモページを表示

CSS

補足

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

jQuery

補足

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

HTML

補足

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

ウィンドウの右下にページトップへ戻るボタンを追加。

ウィンドウの右下に「ページトップへ戻る」ボタンを動的に追加し、スムーズスクロールでページ上端へ戻れるようにする。

デモページを表示

CSS

補足

• 「ページトップへ戻る」ボタンの位置や外観を設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ５行目： body 要素の最後に a 要素を動的に追加。リンク先は body 要素（id="pagetop"）にしている。
• スムーズスクロールさせない場合は、8～14行目は不要。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• ページ上端へ戻すために body 要素に id="pagetop" を設定している。