「ページトップへ戻る」ボタンの作成 - 趣味サイトのためのCSS3講座

▲TOP

「ページトップへ戻る」ボタン(以下、トップボタン)の作成方法についての説明です。

このページの右下の「▲TOP」のボタンのように、トップボタンを作成する方法について解説します。
トップボタンの作成において重要な要素は、以下の4つです。

「position: fixed」
画面がスクロールしてもボタンは固定された状態にします。

「right: ◯px」
ボタンの右端からの距離をpxなどの絶対的な値で指定します。

「bottom: ◯px」
ボタンの下からの距離をpxなどの絶対的な値で指定します。

「z-index: 1」
この数値が高ければ高いほど表示の優先順位が高くなり、他の要素の背面に隠れることがなくなります。
これを指定しないとトップボタンが広告などの背面に隠れてしまうことがあります。

全体のHTMLとCSSは以下のようになります。

HTML

<div class="gototop"><a href="#">▲TOP</a></div>

CSS

.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の位置に常時固定されるので、ガタつきが生じることはありません。

▲ページの先頭へ
下記のように記述することで、トップボタンを画像化することもできます。

HTML

<a class="gototop" href="#"><img src="画像のURL"></a>

CSS

.gototop {
position: fixed;
right: 10px;
bottom: 15px;
opacity: 0.8;
z-index: 1;
}
▲ページの先頭へ
トップボタンを下記のようにflexを用いて「justify-content: flex-end」で配置すると、iPhoneでボタンが表示されなくなったり、バランスがおかしくなったりします。トップボタンを画像にした場合はflexによる配置でも問題ありませんが、文字の場合はバグが発生します。
.gototop {
display: -webkit-flex;
display: flex;
justify-content: flex-end;
}
詳しい説明はここでは省きますが、flexは何かとバグの多い要素です。
「justify-content: flex-end」は 画像の位置調整 には便利ですが、それ以外の用途では使用するのを避けたほうが良いでしょう。
▲ページの先頭へ
トップボタンは便利と言えば便利ですが、「別にページのトップへ戻りたくもないのに誤ってクリック・タップしてしまうことがあるから邪魔」という声もあるのが事実です。
「position: fixed」を使わずとも、下記の画像のようにページの右下に「▲TOP」というリンクを貼るだけでも良いですし、こうしたリンクも無くしてユーザーに手動でスクロールしてもらうという形でも問題ないでしょう。
サンプル画像
便利だからといって、むやみやたらに取り込んでいたのでは逆に使い勝手が悪くなってしまうこともあります。
ページ全体のバランスを考えて、必要な要素を選別しましょう。
▲ページの先頭へ

>>CSS3講座メニューへ戻る