＜広告＞

HTML jQuery

【jQuery】トップへ戻るボタンを右下に固定表示する方法｜コピペOK・スムーズスクロール対応

Webサイトを下までスクロールしたあと、
「トップに戻るボタンがあれば親切なのに…」と思ったことはありませんか？

特にページの長いブログやＬＰでは、トップへ戻るボタンがあるだけでユーザーの操作性（UX）が大きく向上します。

この記事では、jQueryを使って「トップへ戻るボタン」を右下に固定表示し、スムーズにスクロールさせる方法を、コピペで使えるコード付きで分かりやすく解説します。

初心者の方でもつまずかないように、
・HTML
・CSS
・jQuery
の役割を整理しながら紹介するので、Webページにもそのまま応用可能です。

投稿者「みか」自己紹介

  • パソコンとデータベースが大好き
  • 自社でネットワーク・システム・機器管理、Webサイト構築
  • 自社向けのシステムをMicrosoft AccessやPHPで多数構築
  • Excelでの作業はVBAを使って効率化
  • ロックバンド「VARS」でベース担当
  • 「VARS」のWebサイト、ブログも構築
  • 「VARS」のライブを観に来てね！https://vasofatum.jp/live/

この記事でできるようになること

  • jQueryで「トップへ戻るボタン」を実装できる

  • ボタンを画面右下に固定表示できる

  • クリック時になめらかにスクロールさせられる

  • ページ読み込み時ボタンを非表示にする制御ができる

  • 既存Webサイトに簡単に組み込める

こんな人におすすめ

  • jQueryを使ったUI改善を学びたい

  • サイトのユーザビリティを向上させたい

  • ＬＰや長文記事の離脱率を下げたい

  • コピペで使える実践コードが欲しい

HTMLの記述

ボタンの要素を aタグで追加します。

<a id="page_top">▲<⁄a>

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="page_top.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="page_top.js"></script>
<title>トップページボタン</title>
</head>
<body>
<a id="page_top">▲</a>
<p>
    あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>
    い<br>い<br>い<br>い<br>い<br>い<br>い<br>い<br>い<br>い<br>
    う<br>う<br>う<br>う<br>う<br>う<br>う<br>う<br>う<br>う<br>
    え<br>え<br>え<br>え<br>え<br>え<br>え<br>え<br>え<br>え<br>
    お<br>お<br>お<br>お<br>お<br>お<br>お<br>お<br>お<br>お<br>
    か<br>か<br>か<br>か<br>か<br>か<br>か<br>か<br>か<br>か<br>
    き<br>き<br>き<br>き<br>き<br>き<br>き<br>き<br>き<br>き<br>
    く<br>く<br>く<br>く<br>く<br>く<br>く<br>く<br>く<br>く<br>
    け<br>け<br>け<br>け<br>け<br>け<br>け<br>け<br>け<br>け<br>
    こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>こ<br>
</p>
</body>
</html>

CSSの記述

「position」を「fixed」に設定し、ボタンの位置を固定にします。

position: fixed;

「bottom」「right」を「20px」に設定し、ボタンの位置を下から20px、右から20pxに設定します。

bottom: 20px;
right: 20px;

CSS

p{
    text-align: center;
}
#page_top{
    position: fixed;
    padding: 10px;
    bottom: 20px;
    right: 20px;
    background-color: #e0ebaf;
    font-size: 20px;
    cursor: pointer;
}

jQeuryの記述

ページを表示した時に、「hide」を使ってボタンを非表示にします。

toTopBtn.hide();

スクロールされたら、「fadeIn」を使ってボタンを表示します。

toTopBtn.fadeIn();

ボタンがクリックされたら、「animate」で0.5秒かけ、「scrollTop」を使って画面の一番上へ移動させます。

$('body,html').animate({
  scrollTop: 0
}, 500);

JavaScript

$(function(){
    var toTopBtn = $("#page_top");
    // 表示時はボタンを非表示
    toTopBtn.hide();

    // スクロールしたら表示
    $(window).scroll(function(){
        toTopBtn.fadeIn();
    });

    // トップへ戻る
    toTopBtn.click(function(){
        $('body,html').animate({
            scrollTop: 0
        }, 500);    // 0.5秒でトップへ
        return false;
    });
});

動作確認

▼ページ読み込み時、ボタンは表示されていません。

▼スクロール時、ボタンが表示されました。

▼ボタンをクリックしたら、一番上へ移動しました。

よくある失敗・エラーと対処法

「トップへ戻るボタンが表示されない」
「クリックしても反応しない」

こういうとき、ほとんどは初歩的な記述ミスが原因です。

私自身も最初はここでつまずきました。

よくあるパターンをまとめておきます。

ボタンが表示されない場合

考えられる原因

  • CSSで display: none; のままになっている。

  • スクロール量を判定するjQueryが正しく動いていない

確認・対処ポイント

JavaScript

$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('#page_top').fadeIn();
  } else {
    $('#page_top').fadeOut();
  }
});

この 100 の数値は固定ではありません。

ページが短い場合は大きすぎると、そもそも表示されないことがあります。

自分のページの長さに合わせて、50〜200くらいで調整してみてください。

クリックしてもトップに戻らない場合

考えられる原因

  • jQueryが読み込まれていない

  • JavaScriptの読み込み順が間違っている

確認・対処ポイント

HTML

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

JavaScriptの読み込み順は重要です！

必ず「jQuery → 自作JS」の順番で読み込んでください。

順番が逆だと、エラーは出ないのに動かないという状態になりがちです。

スマホで位置がズレる場合

考えられる原因

  • position: fixed; が正しく指定されていない

  • 余白の指定が画面幅に合っていない

確認・対処ポイント

CSS

#page_top{
    position: fixed;
    bottom: 20px;
    right: 20px;
}

「％」指定よりも「px」指定の方が安定します。

特にスマホ表示では、px指定にしておくとズレにくいです。

CSSだけで作る方法との違い

「JavaScriptやjQueryを使わなくても作れないの？」という疑問を持つ方も多いと思います。

それぞれの違いを整理します。

CSSだけで実装する場合

メリット

  • コードがシンプル

  • JavaScriptエラーの影響を受けない

デメリット

  • スクロール量に応じた表示制御ができない

  • スムーズスクロールの調整がほぼできない

jQueryで実装する場合（この記事の方法）

メリット

  • スクロール量で表示・非表示を切り替えられる

  • 動きが自然で使いやすい

  • 細かいカスタマイズができる

デメリット

  • jQueryの読み込みが必要

私は、jQuery版の方が扱いやすいです。

どんなサイトに向いているか

この「トップへ戻るボタン」は、次のようなサイトと特に相性が良いです。

  • 長文ブログ記事

  • LP（縦に長いページ）

  • 技術解説・マニュアルページ

ユーザーが迷わず操作できるようになり、直帰率の低下やページ滞在時間の向上にもつながります。

よくある質問（FAQ）

jQueryで実装するメリットは何ですか？

スクロール量に応じて表示・非表示をコントロールできる点と、なめらかなスムーズスクロールを簡単に実装できる点です。

CSSだけでは難しい動きが可能になるため、長文ブログやLPなど、操作性を重視したページに向いています。

トップへ戻るボタンが表示されない原因は何ですか？

主な原因は次のいずれかです。

  • CSSで display: none; のままになっている

  • スクロール量を判定する条件がページの長さに合っていない

  • jQueryが正しく読み込まれていない

  • JavaScriptの読み込み順が間違っている

特に多いのが、jQueryより先に自作のJavaScriptを読み込んでしまっているケースです。

必ず jQuery → 自作JS の順で読み込まれているか確認してください。

jQueryを使わずにCSSだけで作れますか？

アンカーリンクと scroll-behavior: smooth; を使えば実装できます。

ただし、スクロール量に応じた表示・非表示の切り替えができないことや、動作のカスタマイズ性が低いという制限があります。

見た目や操作性にこだわる場合は、jQueryでの実装がおすすめです。

WordPressでも使えますか？

WordPressでも問題なく使用できます。

  • テーマの footer.php にコードを追加する

  • カスタムHTMLブロックにHTMLを記述する

  • 追加CSS・追加JavaScriptに分けて記述する

など、環境に合わせて導入できますが、最近のテーマにはほぼ導入されています。

トップへ戻るボタンはSEOに影響しますか？

トップへ戻るボタン自体が、直接検索順位を上げる要因になるわけではありません。

ただし、操作性の向上やページ内の回遊率アップ、離脱率の低下といった効果が期待できるため、結果的にSEO評価に良い影響を与える可能性があります。

ユーザーにとって使いやすいサイト設計は、長期的に見て検索エンジンからも評価されやすくなります。

まとめ

jQueryを使ったトップへ戻るボタンは、実装が簡単なのにサイト全体の使いやすさを大きく向上させてくれます。

  • コピペで導入できる

  • UX改善に直結する

まずは今回のコードをそのまま使って、自分のサイトで実際に動かしてみるのが一番の近道です。

＜広告＞

-HTML, jQuery
-, , , ,