CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSとJavaScriptで作る「トップへ戻る」スクロールボタンの実装方法

Webページを下まで読み進めた後に、ワンクリックでページ最上部へ戻れる「トップへ戻る」ボタンは、ユーザビリティを高める定番のUI要素です。この記事では、CSSと少しのJavaScriptを組み合わせて、スクロール位置に応じて自動的に表示・非表示が切り替わるスクロールトップボタンを実装する方法を、コード例とともにわかりやすく解説します。

完全なコード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    height: 120vh; /* スクロールバーを発生させるため */
}
div p {
    font-size: 32px;
}
.topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 1;
    font-size: 24px;
    border: none;
    outline: none;
    background-color: rgb(90, 23, 129);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}
.topBtn:hover {
    background-color: rgb(75, 15, 145);
}
</style>
</head>
<body>
<button class="topBtn">Top</button>
<h1>トップへ戻るボタンのサンプル</h1>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae sit, voluptatem minima quibusdam facere hic eum excepturi ex eius, accusamus cum. Iusto quibusdam quo alias laboriosam, debitis natus vero. Accusantium iusto rerum quisquam enim porro! Animi reiciendis quidem esse veritatis quis excepturi mollitia alias, odio error at temporibus deleniti placeat dignissimos id? Suscipit autem incidunt ad sit soluta natus beatae eveniet eaque id. Atque vitae debitis neque assumenda incidunt iste ut consequuntur cupiditate inventore, eveniet quo adipisci natus blanditiis illum facilis, eius harum cumque enim pariatur magnam sapiente perspiciatis numquam! Sapiente, molestias quaerat. Numquam laborum explicabo quam sapiente dicta aliquam.</p>
</div>
<script>
var topButton = document.querySelector(".topBtn");
topButton.addEventListener("click", topScroll);
window.onscroll = function() {
    scrollBtnShow();
};
function scrollBtnShow() {
    if (
        document.body.scrollTop > 20 ||
        document.documentElement.scrollTop > 20
    ) {
        topButton.style.display = "block";
    }
    else {
        topButton.style.display = "none";
    }
}
function topScroll() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>

コードのポイント解説

1. ボタンの基本スタイル（CSS）

.topBtnクラスでは、position: fixed;を指定することでボタンを画面右下（bottom: 20px;／right: 30px;）に固定配置しています。初期状態はdisplay: none;で非表示にしておき、z-index: 1;によって他のコンテンツより手前に表示されるようにしています。さらにborder-radiusで角丸にし、:hover時に背景色を変化させることで、クリックできるボタンであることを視覚的に伝えています。

2. スクロール量に応じた表示切り替え（JavaScript）

window.onscrollイベントでscrollBtnShow()関数を呼び出し、スクロール位置（scrollTop）が20pxを超えたらボタンをdisplay: block;で表示し、ページ上部に戻れば再び非表示にします。document.body.scrollTopとdocument.documentElement.scrollTopの両方をチェックしているのは、ブラウザ間の仕様の違いに対応するためです。

3. クリックでページ最上部へ戻る処理

topScroll()関数では、両者のscrollTopを0に設定することで、どの環境でも確実にページ先頭へ戻れるようにしています。

出力結果

上記のコードをブラウザで開くと、次のように表示されます。

CSSとJavaScriptで作る「トップへ戻る」スクロールボタンの実装方法

ページを下にスクロールすると、画面右下に「Top」ボタンが現れます。

CSSとJavaScriptで作る「トップへ戻る」スクロールボタンの実装方法

まとめ

固定配置（position: fixed）とスクロールイベントの組み合わせだけで、実用的な「トップへ戻る」ボタンは簡単に実装できます。より滑らかなスクロール演出を加えたい場合は、window.scrollTo({ top: 0, behavior: "smooth" })を使うと、アニメーション付きでページ先頭へ戻ることができますので、ぜひ試してみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {