TEORICO

トップへ戻るボタンなどをふわっと出す方法

トップへ戻るボタンなどをふわっと出す方法

jQueryで特定のものをふわっと出す方法

jQueryで特定のものをふわっと出す方法

よくあるトップへ戻るボタンなど、セレクタを指定することで他のものもフェードインさせることが出来ます。

jQueryの内容

解説

まずは変数の宣言です。

var ではなく const としていますが、特に深い意味はありません。

(もちろん var でも問題はありません。)

selecterに代入する $(‘セレクタ名’);

ですが、まずはHTML側にスクロール時にふわっと表示させたい対象に対して、クラス名またはID名を記述してあげてください。

そして、そのクラス名やID名を指定してあげます。

selecter.hide();

これはjQueryのhideメソッドを利用して対象を非表示にするというものです。

CSSで最初からdisplay:none;にしていてもOKです。

$(window).scroll(function () {

この記述はスクロール時にイベントが起きます。

if文を使い、scrollTopメソッドを利用してページのトップからのスクロール量を比較させ一定のスクロール量(今回は200)を超えたらTRUE、そうでない場合はFALSEとしています。

(200という数値はトップからのスクロール量ですので、変更したい場合は変更してください)

TRUEの場合、fadeInメソッドにより、フェード、つまりふわっと出しています。

FALSEの場合、fadeOutメソッドにより、だんだんと非表示になっていく。という処理を行わせています。

スクロールする度にこの判定は行われますので、トップから一定値を超えたら表示、トップに戻るに連れて非表示ということが行われます。

今回使用したメソッド