【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メソッドを使い非表示としています。
スムーススクロールを実装する場合
また、「トップへ戻るボタン」へクリック時に、スムーススクロールで移動させたい場合には以下のリンク先を参考にしてみてください。
