HTML&CSS

CSSのみで「ページトップへ戻るボタン」を作る完全ガイド

ページトップへ戻るボタンはcssのみで実装できるという話

ニャンコ
ニャンコ

ウェブサイトやブログを訪れるユーザーにとって、長いページをスクロールして読み進めた後、またページのトップに戻るのは一苦労です。このユーザー体験を改善するため、多くのウェブサイトでは「ページトップへ戻る」ボタンを実装しています。

JavaScript や jQuery を使用して実装する方法が一般的ですが、実際には CSS のみでこの機能を実現することも可能です。
この記事では、CSS のみを使用して「ページトップ」 ボタンを実装する方法について解説致します。

ワンコ
ワンコ

サンプルとソース

まずは、何はともあれサンプルをご確認ください。
一度下にスクロールして、青いボタンを押してみると、トップページへ遷移することが分かると思います。

ニャンコ
ニャンコ

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

ポイントはただ２つです。

aタグのhref属性にページ先頭のidを指定する

トップページへ戻るボタンに、戻りたい箇所（トップ）に指定しているidを設定する。(bodyタグにidを指定してもOKです。)
トップに戻るだけならこれで完成です。

<div id="top">
    <!-- ページのコンテンツ -->TOP
</div>

<a href="#top" class="page_top">ページのトップへ戻る</a>

scroll-behavior: smoothで滑らかに遷移させる

aタグにidを指定するだけでは、一瞬でトップに戻ってしまいます。
そこで、scroll-behavior: smoothをhtmlタグのスタイルに指定します。
これで、滑らかに動くスムーススクロールを実装できます。

html {
    scroll-behavior: smooth;
}

scroll-behavior: smoothは、ページ内リンクをクリックした際に、該当箇所へ時間をかけてスクロールするイベント（スムーススクロール）を発生させるCSSプロパティです。
htmlタグ以外に指定しても、動かないため注意！

CSSのみで「ページトップへ戻る」ボタンを実装するメリット

CSSのみで実装するメリットは以下の通りです。
JavaScriptの処理が必要ないのでシンプルというのが一番のメリットではないでしょうか。

ワンコ
ワンコ
  • 軽量化: JavaScriptを使用しないことで、ページの読み込み時間を短縮し、パフォーマンスを向上させることができます。
  • シンプル: コードがシンプルになり、保守が容易になります。

CSSのみで「ページトップへ戻る」ボタンを実装するデメリット

  • ブラウザの互換性: CSSのscroll-behaviorプロパティを使用してスムーススクロールを実現する方法は、古いブラウザや一部のブラウザではサポートされていない場合があります。
  • 機能性の限界: CSSのみで実装する場合、JavaScriptで提供できるような高度な機能を実装することが難しいです。
    たとえば、特定のスクロール位置でボタンを表示させたり隠したりする動的な挙動や、スクロールイベントに基づいたアニメーションのカスタマイズなどは実装できません。

残念ながらCSSだけでは、スクロールの感知はできません。
少しスクロールした時に表示させたい場合などはJavaScriptでの実装が必要になります。

ワンコ
ワンコ

JavaScriptちょい足しで、スタイルを変更する

全てCSSで実装できたら良いんですが、ユーザーの挙動によって画面を変化させるのは、JavaScriptの領分です。
複雑なコードは必要ないので、スクロールによってページトップボタンを変化させたい場合は、JavaScriptを導入しましょう。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

今回はスクロールしたら、クラスを付与してスタイルを変更させました。
直接JavaScriptでスタイルを変更できますが、クラスの付け替えの方がスタイルをカスタムしやすいです。

/* is_activeクラスでボタンを表示（他のスタイルに関するスタイルは省略してます） */
#page_top {
    opacity: 0;
}

#page_top.is_active {
    opacity: 1;
}

JavaScriptではスクロールイベントを実装。
ある一定量を超えたら、「is_active」クラスを付与しています。
どれくらいスクロールしたら、表示するかは「200」の数字の部分を変更することで対応します。

// ボタン要素を取得
const pageTop = document.getElementById('page_top');

// どれくらいスクロールしたら表示するかの値
const scroll = 200;

// スクロールイベントリスナーを追加
window.addEventListener('scroll', () => {
    // 一定量スクロールしたらクラスを付与
    if (window.scrollY > scroll) {
        pageTop.classList.add('is_active'); 
    } else {
        pageTop.classList.remove('is_active'); 
    }
});

-HTML&CSS
-,