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

「ページ上部に戻るボタン」の実装

画面の右下に追従してきて、クリックするとページの一番上まで戻るボタンを実装する方法を解説します。

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

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

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

デモページ

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

.to-top-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に同じ値を指定してください。

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

ページトップへ戻るボタンのデザインをカスタマイズしたい場合

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

ボタンに影をつける

デモページ

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

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

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

デモページ

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

.to-top:hover, .to-top:hover .to-top-arrow {
    border-color: #3293e7;
}

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

(JavaScript)ページの最上部では非表示にする

デモページ

ページの最上部では「ページの上部に戻る」という機能が必要無いため、ボタンを非表示にすることが望ましいです。

それを実現するにはHTML・CSSだけでなくJavaScriptが必要なので、下記を</body>の上に貼り付けてください。

<!-- すでにjQueryを読み込んでいる場合はこの行は不要 --><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() > 1) {
            $('.to-top').fadeIn(300);
        } else {
            $('.to-top').fadeOut(300)
        }
    });
</script>

(JavaScript)スクロールアップを滑らかにする

デモページ

ページの上部に戻る時に「パッ」と移動するとページの中で移動したことがわかりづらい(別のページに遷移したと一瞬誤解するかもしれない)ので、滑らかにスクロールアップすることが望ましいです。

ページ最上部でのボタンの非表示と同じくこの実装にはJavaScriptが必要なので、下記を</body>の上に貼り付けてください。

<!-- すでにjQueryを読み込んでいる場合はこの行は不要 --><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    $(function(){
    const headerHight = 160;
    $('a[href^="#"]').click(function() {
        const speed = 700;
        const href = $(this).attr("href");
        const scrollTarget = $(href == "#" || href == "" ? 'html' : href);
        const scrollPosition = scrollTarget.offset().top - headerHight;
        $('body,html').animate({scrollTop:scrollPosition}, speed, 'swing');
        return false;
        });
    });
</script>

この記事の執筆者

牧野健人

牧野健人

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