ページトップへ戻るボタンをHTMLとCSSのみで実装する方法

著者:牧野健人

画面の右下に追従してきて、クリックするとページトップへ戻るボタンをHTMLとCSSのみで実装する方法を解説します。

コードはコピペOKなので、ぜひご活用ください。

別のコラムではJavaScript(jQuery)を使って実装する方法を解説しています。JavaScriptを使うと、ページの最上部ではボタンを非表示にしたり、スクロールアップを滑らかにしたりすることができます。

ページトップへ戻るボタンをHTMLとCSSのみで実装する方法

下記のHTMLとCSSをコピペすることでページトップに戻るボタンを実装できます。

デモページ

<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

デザインなどを変更したい場合は、下記をご参照の上それぞれの値を設定してください。

height: 50px;
width: 50px;
ボタンのサイズを指定しています。変更する場合は、heightとwidthに同じ値を指定してください。
right: 20px;
ボタンの横軸の位置を、ウィンドウの右端からの距離で指定しています。
bottom: 40px;
ボタンの縦軸の位置を、ウィンドウの下端からの距離で指定しています。
border: solid 1px #000;
ボタンの枠線の太さ(1px)と色(#000)を設定しています。
height: 10px;
width: 10px;
矢印のサイズを指定しています。変更する場合は、heightとwidthに同じ値を指定してください。
border-top: 2px solid #000;
border-right: 2px solid #000;
矢印の線の太さ(2px)と色(#000)を設定しています。変更する場合は、border-topとborder-rightに同じ値を指定してください。

上記以外の箇所は特に変更する必要はありません。

ページトップへ戻るボタンをカスタマイズする方法

色やサイズなどの基本的なカスタマイズは上述した通りに値をご設定いただくことで実現可能ですが、より表現を追加したい場合は下記をご参照ください。

ボタンに影をつける

デモページ

ボタンに影をつけたい場合は、下記のように追記してください。

.pagetop {
    box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}

マウスオーバーでデザインを変える

デモページ

マウスオーバーでデザインを変えたい場合は、下記のように追記してください。

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #3293e7;
    }
}

この例では、ボタンの枠と矢印の色が青に変わります。別の色に変えたい場合は、#3293e7;の値を調整してください。

牧野健人

著者牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。

お問い合わせはフォームよりお願いいたします。

お気軽にご相談ください

Webサイトに関する課題をお持ちの方はお気軽にご連絡ください。
課題が曖昧な状態でのご相談でも大丈夫です。

改善点や競合との比較がわかる無料サイト診断 無料相談・お問い合わせ
改善点や競合との比較がわかる無料のサイト診断