【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で返信する場合はコチラから。