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

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

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

記事の著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

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

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

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

デモページ

<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>

html {
    scroll-behavior: smooth;
}
.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);
}

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

scroll-behavior: smooth;

ページトップに滑らかにスクロールアップして戻るようにする設定です。スクロールアップではなく一瞬でトップに移動するようにしたい場合はこの記述は不要です。

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;の値を調整してください。