簡単!無限スクロールの実施方法 – サイト最下部までスクロールでtopへ移動

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは!今日のtipは【無限スクロールの実施方法】です。基本構成はシンプルです。現在のスクロール位置がコンテンツの高さを超えた時、最上部へ自動的に移動するだけです。最近よく見かけるようになったスタイルです。

コード

HTML
<div id="scrollArea">
<!– ここにコンテンツを記述します。 –>
</div>
jQuery

<script type="text/javascript">
$(function(){
$(window).scrollTop(0,0);
var windowH = $(‘#scrollArea’).innerHeight();
$(window).scroll(function(){
var bodyH = $(window).height();
var scroll = Math.floor($(this).scrollTop());
var scrollAll = scroll + bodyH;
if( windowH <= scrollAll){
$(window).scrollTop(0,0);
}
});
});
</script>

DEMO

以上です。