<button class="pagetop-btn_05" id="pageTopBtn"></button>
.pagetop-btn_05 {
width: 52px;
height: 52px;
position: fixed;
bottom: 30px;
right: 30px;
background: var(--color-white);
color: var(--color-text);
border-radius: 50%;
border: none;
line-height: 1.1;
cursor: pointer;
z-index: 1000;
transition: opacity 0.3s ease, transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.pagetop-btn_05::before {
content: "Go to TOP";
color: var(--color-text);
font-size: 12px;
font-family: serif;
}
.pagetop-btn_05:hover {
transform: translateY(-5px);
opacity: 0.8;
}
$(document).ready(function () {
// 最初はボタンを非表示
$('#pageTopBtn').hide();
// スクロール時の処理
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
// 300px以上スクロールしたらボタンを表示
$('#pageTopBtn').fadeIn();
} else {
// 300px未満ならボタンを非表示
$('#pageTopBtn').fadeOut();
}
});
// ボタンをクリックしたときの処理
$('#pageTopBtn').click(function () {
// ページトップへスムーズにスクロール
$('html, body').animate({ scrollTop: 0 }, 500);
return false;
});
});
JavaScript解説
前提
$(document).ready(function ()
-
$(document).ready()
とは- 役割: HTMLの読み込みが完全に終わってから、中のコードを実行
- なぜ必要?: ボタンがまだ存在しない段階でJavaScriptを実行するとエラーになるため
1. ボタンを最初は非表示にする
$('#pageTopBtn').hide();
-
$('#pageTopBtn')
でid="pageTopBtn"
の要素を取得-
.hide()
: その要素を非表示にする - なぜ?: ページ表示時、まだスクロールしていないのでボタンは不要
-
2. スクロール時の処理
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('#pageTopBtn').fadeIn();
} else {
$('#pageTopBtn').fadeOut();
}
});
$(window).scroll(function () { ... })
- 役割: ユーザーが画面をスクロールするたびに、この中のコードを実行
$(this).scrollTop()
- 役割: 現在のスクロール位置(ピクセル数)を取得
- 例: ページトップなら
0
、300px
スクロールしたら300
if ($(this).scrollTop() > 300)
- 条件: スクロール位置が
300px
を超えたら - 真の場合:
$('#pageTopBtn').fadeIn();
→ ボタンをフェードインで表示
else
- 条件: スクロール位置が300px未満なら
- 偽の場合:
$('#pageTopBtn').fadeOut();
→ ボタンをフェードアウトで非表示
3. ボタンをクリックしたときの処理
$('#pageTopBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 500);
return false;
});
$('#pageTopBtn').click(function () { ... })
- 役割: ボタンがクリックされたときに、この中のコードを実行
$('html, body')
- 役割: HTMLとbodyの両方を取得(ブラウザの互換性のため)
.animate({ scrollTop: 0 }, 500)
- scrollTop: 0: スクロール位置を0(ページトップ)にする
- 500: 500ミリ秒(0.5秒)かけてアニメーション
- 結果: ページトップへスムーズにスクロール
return false;
- 役割: リンクのデフォルト動作(ページ遷移など)を防ぐ
- なぜ必要?: ボタンがクリックされたときに、他の動作が起きないようにする