お問合せ
MENU

【コピペOK】CSSとjQueryでトップへ戻るボタンを実装する方法

コードのこと

今回は、CSSとjQueryを使って、トップへ戻るボタンを簡単に実装する方法をご紹介します。

このボタンを使うことで、ユーザーは長いページをスムーズに戻ることができ、便利さがアップします。それでは早速始めましょう！

今回実装するのはこちらのような動きのものです。

①スクロールしたら右下に上へ戻るボタンがフェードインで現れます。
②上へ戻るボタンをクリックすると一番上に戻ります。
③一番上に戻ると上へ戻るボタンがフェードアウトで消えます。

デモはこちら

よくある基本的な「TOPへ戻るボタン」なので、こちらをマスターすれば色々なサイトで使えますよ！

FontAwesomeでアイコンの準備

<head></head>の間にFontAwesomeのCDNの読み込みコードを追加してください。
こちらを追加しておくことでアイコンを使うことが可能になります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

トップへ戻るボタンのHTML

まずは、基本的なHTMLを準備しましょう。ページの一番上に戻るためのアンカーを設定して、ボタンを作成します。

※<i class=”fa fa-arrow-up”></i>はFontAwesomeの矢印アイコンです。

<!-- ページトップのアンカー -->
<a id="top"></a>
<div class="inner">
    <div class="cont-box">コンテンツBOX<br>下にスクロールしてね↓<br>右下にTOPへ戻るボタンが表示されたらクリックしてみてね<br>上に戻るよ！</div>
</div>
<!-- トップへ戻るボタン -->
<a href="#top" class="back-to-top"><i class="fa fa-arrow-up"></i></a>

トップへ戻るボタンのCSS

次に、CSSを使ってボタンのデザインを整えていきましょう。ここでは、ボタンを固定して、スクロールに応じて表示・非表示を切り替えるスタイルを作ります。

/* コンテンツBOXのスタイル */
.cont-box{
    background-color: #eee;
    padding: 10px;
    background-color: #eee;
    font-size: 1.6rem;
    text-align: center;
    height: 150vh;
}

.inner{
    width:1200px;
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
}

/* トップへ戻るボタンの基本スタイル */
.back-to-top {
    position: fixed;/* 追従する設定 */
    bottom: 20px;
    right: 20px;
    display: none;/* スクロールするまでは非表示 */
    background-color: #000;
    color: #fff;
    padding: 9px;
    text-decoration: none;
    border-radius: 50%;
    font-size: 20px;
    transition: background-color 0.3s ease, opacity 0.3s ease;/* ふわっと表示するためのアニメーション設定 */
    z-index: 1000;
    width: 50px;
    height: 50px;
    text-align: center;
}

/* ホバー時の効果 */
.back-to-top:hover {
    background-color: #555;
}

/* スムーズな表示/非表示のためのスタイル */
.back-to-top.show {
    display: block;
    opacity: 1;
}

トップへ戻るボタンのjQuery

次に、jQueryを使ってボタンをスクロールに応じて表示・非表示に切り替えるスクリプトを追加します。

// スクロール時の処理
$(window).scroll(function() {
    if ($(this).scrollTop() > 100) { /* TOPから100px以上スクロールしたら */
        $('.back-to-top').addClass('show');
    } else {
        $('.back-to-top').removeClass('show');
    }
});

// ボタンクリック時にトップへ戻る処理
$('.back-to-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, 600);/* 上へスクロールして戻る */
    return false;
});

jQuery本体の読み込みを忘れずに

jQueryのコードはjQuery本体が読み込まれていないと動作しません。
jQuery本体を読み込んでいない方は以下のCDNを読み込みましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

また、jQuery本体の読み込み後にjQueryのコードを記述しないと動作しませんので気をつけましょう。

これだけでトップへ戻るボタンの実装が完了しました！

上へ戻るボタンの全体コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>トップへ戻るボタンデモ</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- ページトップのアンカー -->
    <a id="top"></a>
    <div class="inner">
        <div class="cont-box">コンテンツBOX<br>下にスクロールしてね↓<br>右下にTOPへ戻るボタンが表示されたらクリックしてみてね<br>上に戻るよ！</div>
    </div>
    <!-- トップへ戻るボタン -->
    <a href="#top" class="back-to-top"><i class="fa fa-arrow-up"></i></a>
    <style>
        /* コンテンツBOXのスタイル */
        .cont-box{
            background-color: #eee;
            padding: 10px;
            background-color: #eee;
            font-size: 1.6rem;
            text-align: center;
            height: 150vh;
        }
        
        .inner{
            width:1200px;
            max-width:90%;
            margin-left:auto;
            margin-right:auto;
        }
        
        /* トップへ戻るボタンの基本スタイル */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            background-color: #000;
            color: #fff;
            padding: 9px;
            text-decoration: none;
            border-radius: 50%;
            font-size: 20px;
            transition: background-color 0.3s ease, opacity 0.3s ease;
            z-index: 1000;
            width: 50px;
            height: 50px;
            text-align: center;
        }

        /* ホバー時の効果 */
        .back-to-top:hover {
            background-color: #555;
        }

        /* スムーズな表示/非表示のためのスタイル */
        .back-to-top.show {
            display: block;
            opacity: 1;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // スクロール時の処理
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) { 
                $('.back-to-top').addClass('show');
            } else {
                $('.back-to-top').removeClass('show');
            }
        });

        // ボタンクリック時にトップへ戻る処理
        $('.back-to-top').click(function(event) {
            event.preventDefault();
            $('html, body').animate({scrollTop: 0}, 600);
            return false;
        });
    </script>
</body>
</html>

jQueryでなく素のJavaScriptで実装する

あまりjQuery使いたくないという方はjQueryのコードを以下のコードに変更してください

// DOMが読み込まれた後に実行
document.addEventListener('DOMContentLoaded', function() {
    var backToTopButton = document.querySelector('.back-to-top');

    // スクロール時の処理
    window.addEventListener('scroll', function() {
        if (window.scrollY > 100) {
            backToTopButton.classList.add('show');
        } else {
            backToTopButton.classList.remove('show');
        }
    });

    // ボタンクリック時にトップへ戻る処理
    backToTopButton.addEventListener('click', function(event) {
        event.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});

トップへ戻るボタンの作り方のまとめ

この記事では、トップへ戻るボタンをCSSとjQueryを使って簡単に実装する方法を紹介しました。
記事のポイントをまとめます。

  • トップへ戻るボタンは、訪問者の操作性を向上させる便利なツールです。
  • CSSでボタンのデザインを簡単に設定できます。
  • jQueryでスクロールに応じた表示・非表示を実現します。
  • FontAwesome等の矢印アイコンを使って、おしゃれなデザインにすることもできます。

このページの記事はコピペもOKですので、ぜひ自分のサイトにも実装してみてくださいね！

ブログ一覧へ