[JS]ブラウザを一定量スクロールさせるとボタンを表示させて固定させるカスタマイズ｜Javascript・jQuery

[JS]ブラウザを一定量スクロールさせるとボタンを表示させて固定させるカスタマイズ

スポンサード

この記事は fine×3 様の記事を参考にさせていただきました。

jQuery を利用して、ブラウザを一定量スクロールさせることで非表示だったボタンなどの要素を表示させる方法です。

例えば、普段は「ページの先頭へ」のボタンは非表示にしておき、ページを一定量スクロールさせることで、ぼんやりボタンを出現させる、という処理です。

1 javascript ファイルのダウンロード
2 javascript の処理
3 CSS でデザイン調整

javascript ファイルのダウンロード

fine×3 様のサイトにてソースコードとデモが紹介さています。

スクロール量に合わせてボタンを表示する

javascript の処理

ページを 300px 以上スクロールすると #pagetop の要素を表示し、300px 未満であれば非表示にするという処理です。

<script>
$(function() {
$(window).scroll(function () {
var s = $(this).scrollTop();
var m = 300;
if(s > m) {
$("#pagetop").fadeIn('slow');
} else if(s < m) {
$("#pagetop").fadeOut('slow');
}
});
});
</script>

$(function() {

$(window).scroll(function () {

var s = $(this).scrollTop();

var m = 300;

if(s > m) {

$("#pagetop").fadeIn('slow');

} else if(s < m) {

$("#pagetop").fadeOut('slow');

}

});

</script>

var m = 300 の数値（スクロール量）は自由に変更することができます。

CSS でデザイン調整

あとは #pagetop 要素のデザインをCSS で補正してあげます。

#pagetop	 {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
}

#pagetop {

display: none;

position: fixed;

bottom: 10px;

right: 10px;

}

ページ表示時点（300px 未満のスクロール量）では #pagetop は非表示なので display:none にしてあげます。

また要素は固定させておくので position:fixed も加えています。

参考ページ
スクロール量に合わせてボタンを表示する

スポンサード