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

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

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

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

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

 

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

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

HTML

CSS

JavaScript

Run Result

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください