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

ページ内のスクロール量でボタンの表示・非表示を制御するjQueryのサンプルを紹介します。最近色々なブログで、ページの上部へ戻る際のボタンの制御に使っているので自作してみました。

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

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

解説

今回のイベントハンドラは「スクロール」なのでスクロールしたら処理を実行します。

	$(window).scroll(function () {

次に2つの変数を説明します。

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

まず変数「s」に入れるのはスクロール量になります。次に変数「m」にはボタンを表示させるまでのスクロール量を入れます。
今回の例では300を指定しているので300px以上スクロールしたらボタンを表示します。

		if(s > m) {
			$("#pagetop").fadeIn('slow');
		} else if(s < m) {
			$("#pagetop").fadeOut('slow');
		}

最後に上記のif文の解説をします。
まず最初の条件式に(s > m)とあるとおり、s（スクロール量）がm（指定した値）より大きかったらID名「pagetop」を表示します。
そして2つ目の条件式では(s < m)とあるので、最初の条件式と逆でs（スクロール量）がm（指定した値）より小さかったらID名「pagetop」を非表示にするとなります。