【jQuery】スクロールしたら出現するボタン

2017年3月12日

覚え書きです。

ページ読み込み時は出ていないのに、スクロールしたら出現するボタン。
よく見るのがトップへ戻るボタンですね。あれです。
なるべく少ないコードでと探していて見つかったものです。作者様ありがとうございます。

一定量スクロールすると表示する「ページトップ」ボタンの実装方法

このjQueryコードと
//pagetop
$(function() {
var topBtn = $('.pagetop');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
//ボタンの表示方法
topBtn.fadeIn();
} else {
//ボタンの非表示方法
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body, html').animate({
scrollTop: 0
}, 500);
return false;
});
});

このCSSで
.pagetop {
position: fixed;
bottom: 20px;
right: 20px;
}

スクロールが開始されたら右下に固定されるボタンが出現します。
position:fixed　なのでフラフラ動かず私的には最高です。

詳しくは本家ページをご覧ください