ページトップへ戻るボタン

ページトップへ戻るボタンを追加する

ページ内リンクで実現

ページトップへ戻るボタンを追加する

ページ内リンクを使う

ページトップへ戻るボタンを作るには、まずページ下部にリンクを作成する

ページの上部に表示される要素に id 属性を追加する

ページヘッダーの <header> タグに、id 名 top を追加する

ボタンの上向き矢印にはアイコンフォント（Font Awesome）を使用する

ページトップに戻るボタン（<a href="#top"> ～ </a>）には display: inline-block; を適用している

これは適度な幅をつくるためのテクニック

マージンのッ他見込みが解消され、ページ下部コンテナとフッターコンテナのすき間がなくなった

ページ下部コンテナの親要素（<div class="page-bottom">）の下マージンと、最後の子要素（<div class="gotop">）の下マージンがともに 0 だから

たたみ込まれるマージンが 0 になったのですき間が空かなくなった

ページトップへ戻るボタンをクリックして、スクロールしながら戻るようにしたいときは、html 要素に適用される CSS に次の 1行を追加する

html {
␣␣scroll-behavior: smooth;
}