【jQuery】スクロールの位置により表示・非表示を切り替え|トップへ戻るボタンの例

今回は、jQueryを使用し、スクロールの位置によって「トップへ戻るボタン」の表示・非表示を切り替える簡単な例となります。

スクロールの位置により「トップへ戻るボタン」の表示・非表示を切り替え

以下がjQueryを利用したソースコードの例となります。

例では、スクロールの位置が301px以上の場合に「go to top」ボタンを表示し、300px以下の場合に非表示とします。

See the Pen go to top by yic666kr (@yic666kr) on CodePen.

jQueryのソースコードの説明

以下、jQueryのソースコードの説明となります。

例では、スクロールの位置が301px以上の場合に、idの属性値にpagetopを持つ「go to top」ボタンを、fadeInメソッドを使い表示しています。

そして、スクロールの位置が300px以下の場合に、「go to top」ボタンをfadeOutメソッドを使い非表示としています。

スムーススクロールを実装する場合

また、「トップへ戻るボタン」へクリック時に、スムーススクロールで移動させたい場合には以下のリンク先を参考にしてみてください。

参考サイトなど

コメント欄

  1. inacco様

    初めまして。 jQuery初心者です。 こちらの記事を参考にさせていただきたいのですが、 一定の位置までスクロールしたらボタンを再び非表示する場合は、 どうしたら良いのでしょうか? 100px以下 非表示 101px以上500px以下 表示 501px以上 非表示 教えていただけたら幸いです。 よろしくお願いいたします。

    1. 当記事執筆者

      コメントありがとうございます。

      今回の記事の場合、$(window).scrollTop() でスクロール位置を判断する条件を追記することで実装できると思います。

      また、jQueryで任意のエリアを指定する場合、以下の記事のような方法もあります。

      https://blog-and-destroy.com/15943

  2. inacco様

    ありがとうございます。 サイドバーのコンテンツの固定・解除を参考にチャレンジしてみたのですが、 見よう見まねで始めたばかりの初心者なもので、なかなか思うようにいきません… もしできたら、具体的に条件分岐のソースコードを教えていただけないでしょうか? どうかよろしくお願いいたします。

    1. 当記事執筆者

      コメントありがとうございます。

      次のような条件分岐で実装できると思います。

          let scrollTop = $(window).scrollTop();
          if (scrollTop < 101 || scrollTop > 500) {
            $('#pagetop').fadeOut(400);
          } else {
            $('#pagetop').fadeIn(400);
          }

コメント投稿コメント投稿欄を開く

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。