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

Javascript・jQuery

2013.04.092018.01.06

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

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

javascriptファイルのダウンロード
javascript の処理
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も加えています。

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