[jQuery]手軽に実装する上に戻るボタン。最初は非表示である程度スクロールすると表示される機能付き。

ちょっとスクロールすると表示される上に戻るボタンのソースです。

スクロールするたびに位置をチェックしています。

指定したピクセル分 下にスクロールしたら上に戻るボタンをフェードインします。

逆に指定したピクセル以内になると上に戻るボタンをフェードアウトします。

 

上に戻るボタンをクリックするとシュイーンと一番上までスクロールします。

スクロールのチェックタイミングを間引いてパフォーマンスを良くするなど、まだまだ改善の余地はあるかと思いますが、サクッと実装したいときにはご活用くださいませ。

HTML

CSS

JavaScript

Run Result

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です