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

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

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

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

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

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

ソースコードの説明

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

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

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

参考サイトなど

コメント投稿またはTwitterで返信

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

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