0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JQueryでページトップボタン

Last updated at Posted at 2025-10-15
<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()

  • 役割: 現在のスクロール位置(ピクセル数)を取得
  • 例: ページトップなら0300pxスクロールしたら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;

  • 役割: リンクのデフォルト動作(ページ遷移など)を防ぐ
  • なぜ必要?: ボタンがクリックされたときに、他の動作が起きないようにする

スクリーンショット 2025-10-15 18.43.28.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?