トップへ戻るボタンなどをふわっと出す方法
トップへ戻るボタンなどをふわっと出す方法
jQueryで特定のものをふわっと出す方法
よくあるトップへ戻るボタンなど、セレクタを指定することで他のものもフェードインさせることが出来ます。
jQueryの内容
//セレクタ名はボタンのID名かクラス名このjqueryでは全て同じセレクタ名にする
$(function () {
const selecter = $('セレクタ名');
selecter.hide();
//画面をスクロールした時に実行
$(window).on('scroll', function () {
//200pxスクロールした時に実行する
if ($(this).scrollTop() > 200) {
//フワッとだす
selecter.fadeIn();
} else {
//フワッと消す
selecter.fadeOut();
}
});
});
解説
まずは変数の宣言です。
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メソッドにより、だんだんと非表示になっていく。という処理を行わせています。
スクロールする度にこの判定は行われますので、トップから一定値を超えたら表示、トップに戻るに連れて非表示ということが行われます。
今回使用したメソッド
// 要素をdisplay:noneにする
$('セレクタ名').hide();
// ページのトップからのスクロール量を取得
$('セレクタ名').scrollTop();
// フェードイン（ふわっと表示）
$('セレクタ名').fadeIn();
// フェードアウト（じわっと消える）
$('セレクタ名').fadeOut();