SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

ページの下までスクロールしたときに何らかの処理を実行する例

ページの下までスクロールしたときに何らかの処理を実行する例

$(window).bind("scroll", function() {
	scrollHeight = $(document).height();
	scrollPosition = $(window).height() + $(window).scrollTop();
	if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
		//スクロールの位置が下部5%の範囲に来た場合
	} else {
		//それ以外のスクロールの位置の場合
	}
});

demo ページをある程度下までスクロールしたときに何らかの処理を実行する – デモ

「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。

条件は以下のようなものに変更可能です。

・上の例のように割り算で、「下の5%の範囲に入ったら」
・「何%ぐらい読み進めたタイミングで」
・引き算で「下の何pxの範囲に入ったら」

参考

汎用的なプラグインで対応したい場合は、こちらもよいでしょう。

https://github.com/jimyi/jquery_bottom

関連するメモ

コメント(1)

WEBページのスクロール最後に達したらjavascript発動(Android/iPhone対応) 2015年4月17日 11:30

[…] よくページ全体に対してこのような事をすると思いますが、 (その時はこのようなコードが参考になります↓ https://www.softel.co.jp/blogs/tech/archives/4308) […]