TeoricoHomeBlogAboutContactホーム>トップへ戻るボタンなどをふわっと出す方法トップへ戻るボタンなどをふわっと出す方法トップへ戻るボタンなどをふわっと出す方法2017-06-15jQueryで特定のものをふわっと出す方法よくあるトップへ戻るボタンなど、セレクタを指定することで他のものもフェードインさせることが出来ます。{//フワッと消すselecter.fadeOut();}});});解説まずは変数の宣言です。していますが、特に深い意味はありません。$(‘セレクタ名’);ですが、まずはHTML側にスクロール時にふわっと表示させたい対象に対して、クラス名またはID名を記述してあげてください。そのクラス名やID名を指定してあげます。selecter.hide();これはjQueryのhideメソッドを利用して対象を非表示にするというものです。CSSで最初からdisplay:none;にしていてもOKです。{この記述はスクロール時にイベントが起きます。if文を使い、scrollTopメソッドを利用してページのトップからのスクロール量を比較させ一定のスクロール量(今回は200)を超えたらTRUE、そうでない場合はFALSEとしています。(200という数値はトップからのスクロール量ですので、変更したい場合は変更してください)TRUEの場合、fadeInメソッドにより、フェード、つまりふわっと出しています。FALSEの場合、fadeOutメソッドにより、だんだんと非表示になっていく。いう処理を行わせています。スクロールする度にこの判定は行われますので、トップから一定値を超えたら表示、トップに戻るに連れて非表示ということが行われます。