ページの下にスクロールすると ふわっと出てきて、クリックしたら上に戻れるボタン、Webサイトによくありますよね。
今回はその仕組みを HTML / CSS / jQuery の3つで実装します。
（スクールさんではjQueryの実装がまだまだメインのようなので、まずはjQueryで説明。）
その後、Vanilla JS、CSSのみ、UIライブラリやフレームワークの説明をさらっとのせています。
個人的にはVanilla JSをおススメしていますが、どの仕方もさらっとでも把握しておいた方が良いでしょう。
目次
① jQueryを読み込む準備をしよう
jQuery の機能を使いたい場合、必ず本体（jQuery本体ファイル）を読み込む必要があります。
手順
- jsフォルダを作る
- 中に script.js を作る
</body>タグの直前に jQuery と script.js を読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/script.js"></script>
✔ ここに置く理由
- jQueryを読み込むことで script.js 内で jQueryが使える
- body閉じタグの前に置くことで、HTMLが読み込まれた後にスクリプトが実行され、エラーを防げる
初心者がよくやるミスなので、最初に書いておくのはとても良い判断です！
② ページトップへ戻るボタンのHTML
まずはボタンを用意します。
<button type="button" id="js-button-top" class="button">TOP</button>
✔ id=”js-button-top” → jQueryでこのボタンを操作するための目印
✔ button クラス → ボタンの見た目をCSSで作るため
③ CSSでボタンの見た目を作る
.button {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
height: 50px;
width: 50px;
background-color: #fff;
color: #3c301e;
border: solid 1px #3c301e;
border-radius: 50%;
cursor: pointer;
}
.button:hover {
opacity: 0.7;
}
ひとつずつ意味を整理します👇
✔ display: none;
最初は非表示（スクロールするまで出ない）
✔ position: fixed;
画面に固定表示
（スクロールしても画面の右下にずっとついてくる）
✔ bottom: 30px; right: 30px;
画面右下からの距離
✔ border-radius: 50%;
丸いボタンにする
✔ cursor: pointer;
カーソルを「手の形」に
✔ opacity: 0.7;
ホバーした時に少し透明にして「押せる感」を演出
④ jQueryで動きを付ける（メイン処理）
▼ スクロールしたらボタンを表示・非表示
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > 80){
jQuery("#js-button-top").fadeIn(300);
} else {
jQuery("#js-button-top").fadeOut(300);
}
})
ここが一番「動いてる感」がある部分です。
ポイントを順番に説明します👇
✔ jQuery(window).scroll(function(){ … })
画面をスクロールした瞬間に、この中の処理が実行される
✔ jQuery(this).scrollTop()
いま画面がどれだけ縦にスクロールされているかを取得
（数値で返ってくる）
例：100pxスクロール → 値は100
✔ if (scrollTop > 80)
80pxよりスクロールしていたら「ボタンを表示」
✔ fadeIn(300) / fadeOut(300)
0.3秒かけてふわっと表示・非表示
CSSの見た目 × jQueryのアニメーションで自然でやさしい挙動になります。
▼ クリックしたらトップに戻る
jQuery("#js-button-top").on("click",function(){
jQuery("html,body").animate({scrollTop:0},500);
});
✔ on(“click”)
クリックしたときだけ実行される処理
✔ jQuery(“html, body”).animate({scrollTop: 0}, 500);
ページ全体（html + body）を0.5秒かけてスクロール位置0に移動（＝トップへ）
jQueryを使うと、なめらかなスクロールが簡単に書けます。
▼ まとめ
1️⃣ HTMLでボタンを作る
2️⃣ CSSでボタンを右下に固定＆非表示
3️⃣ jQueryで
✔ スクロールしたら表示
✔ クリックでトップに戻る
という流れ。
初心者のつまづきポイントが多いですが、整理して読むと
「スクロールを監視 → 条件で表示 → クリックで戻る」
たったこれだけです。
ページトップへ戻るボタンは jQueryがなくても、純粋なJavaScript（Vanilla JS）だけで実装可能です。
むしろ最近のWeb制作では、jQueryを使わない実装の方が主流になりつつあります。
ここでは、代表的な3つの方法を紹介します👇
①【一番おすすめ】純JavaScript（Vanilla JS）で実装する方法
jQueryなしで書くと、こんなにスッキリします。
▼ HTMLは同じ
<button id="js-button-top" class="button">TOP</button>
▼ CSSもそのままでOK
前と同じCSSが使えます。
▼ JavaScript（最小構成）
const topBtn = document.getElementById("js-button-top");
// スクロールで表示・非表示
window.addEventListener("scroll", () => {
if (window.scrollY > 80) {
topBtn.style.display = "block";
} else {
topBtn.style.display = "none";
}
});
// クリックでトップへ
topBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
✔ ポイント
- window.scrollY
→ 現在のスクロール量を取得 - style.display = “block” / “none”
→ シンプルな表示・非表示 - scrollTo({ behavior: “smooth” })
→ ブラウザ標準の「なめらかスクロール」
（jQueryの animate より軽い！）
jQueryなしでも、十分きれいで軽量なコードになります。
② CSSだけで戻るボタンをスムーズスクロールにする方法
実は、「クリック時のスムーズスクロール」は CSSだけでも可能 です。
▼ CSSにこれを追加
html {
scroll-behavior: smooth;
}
▼ HTMLでIDをリンクさせる
ページの一番上にIDを付ける。
<body id="top">
ボタンはaタグにする。
<a href="#top" id="js-button-top" class="button">TOP</a>
✔ メリット
- JavaScriptなしで超軽量
- サイトの表示速度に優しい
- モダンブラウザならほぼ対応
✔ デメリット
- 「80pxスクロールで表示→非表示」などの動的処理は JS が必要
（CSSだけではスクロール量を判断できない）
③ UIライブラリやフレームワークを使う方法
サイト全体を React / Vue / Next.js / Svelte などで組んでいる場合は、そのフレームワーク特有の書き方で実装するパターンもあります。
▼ Reactの例（Hooks使用）
import { useState, useEffect } from "react";
export default function TopButton() {
const [show, setShow] = useState(false);
useEffect(() => {
const handleScroll = () => {
setShow(window.scrollY > 80);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<button
style={{ display: show ? "block" : "none" }}
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
className="button"
>
TOP
</button>
);
}
React / Vue などで開発している人にとっては、この方が扱いやすいですね。
どの方法が一番おすすめ？
| 方法 | 特徴 | おすすめ度 |
|---|---|---|
| ① 純JavaScript | 最も軽量で、今の主流。jQuery不要 | ⭐⭐⭐⭐⭐ |
| ② CSS（scroll-behavior: smooth） | 最小コード。動きの制御は弱い | ⭐⭐⭐⭐ |
| ③ React / Vue など | SPAや大規模サイト向け | ⭐⭐⭐ |
結論
これからWeb制作を学ぶなら、jQueryより純JavaScriptの実装を覚える方が、絶対に役に立ちます。
jQueryの役割はどんどん減っており、今後は「Vanilla JSで書ける人」が強いです。
