「ページトップへ戻る」ボタン（以下、トップボタン）の作成方法についての説明です。
このページの右下の「▲TOP」のボタンのように、トップボタンを作成する方法について解説します。
トップボタンの作成において重要な要素は、以下の4つです。
「position: fixed」
画面がスクロールしてもボタンは固定された状態にします。
「right: ◯px」
ボタンの右端からの距離をpxなどの絶対的な値で指定します。
「bottom: ◯px」
ボタンの下からの距離をpxなどの絶対的な値で指定します。
「z-index: 1」
この数値が高ければ高いほど表示の優先順位が高くなり、他の要素の背面に隠れることがなくなります。
これを指定しないとトップボタンが広告などの背面に隠れてしまうことがあります。
全体のHTMLとCSSは以下のようになります。
<div class="gototop"><a href="#">▲TOP</a></div>
.gototop {
position: fixed;
width: 60px;
height: 30px;
right: 10px;
bottom: 15px;
background: gray;
opacity: 0.8;
z-index: 1;
}
.gototop a {
display: grid;
color: white;
padding: 5%;
text-align: center;
text-decoration: none;
}
注意点として、「right: ◯px」と「bottom: ◯px」の部分は、かならず「px」などの絶対的な数値で指定してください。「%」「vw」「vh」などの相対的な数値を指定すると、スマホやタブレットではスクロール時にアドレスバーが隠れて画面サイズが変わるので、ガタつきが生じてしまいます。（「%」「vw」「vh」などの単位は、画面サイズの幅に対して占める割合を指定するものであるため）
「bottom: 15px」のように指定しておけば、画面の高さに関係なく下から15pxの位置に常時固定されるので、ガタつきが生じることはありません。
<a class="gototop" href="#"><img src="画像のURL"></a>
.gototop {
position: fixed;
right: 10px;
bottom: 15px;
opacity: 0.8;
z-index: 1;
}
.gototop {
display: -webkit-flex;
display: flex;
justify-content: flex-end;
}
