htmlr/example.html

## example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Scroll Loader Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://gist.github.com/1592132.js?file=scrollLoader.js"></script>
</head>
<body>
<ol id="feed">
</ol>

<script>
$(document).ready(function() {
    initScrollLoader();
});
</script>
</body>
</html>

## scrollLoader.js
/*
SETTINGS
*/

var feedSettings = {
    percentageOffset: 0.15,
    pagelimit: 10,
    offset: 0
};

/*
 GENERATE SOME DUMMRY FEED ITEMS
*/
var pageMax = feedSettings.offset + feedSettings.pagelimit;
for (i=feedSettings.offset; i < pageMax; i++){
        $('#feed').append('<li id="postId'+i+'">Another feed item ' + i + '</li>');
    }
feedSettings.offset = i; // update offset

/* AJAX CONTENT LOADER */

$('#feed').on('ajaxLoadNext', function(e) {
    console.log('ajaxLoadNext()');
    $('#feed li:last').remove(); // remove load more link on success
    var pageMax = feedSettings.offset + feedSettings.pagelimit;
    console.log('pageMax: ' + pageMax);

    for (count=feedSettings.offset; count < pageMax; count++) {
        $('#feed').append('<li id="postId'+count+'">Another feed item ' + count + '</li>');
    }

/* PLACEHOLDER: This is where you would do you real AJAX call
    $.ajax({
        type: "POST",
        url: "acitivityFeed.jsp",
        data: "offset="+feedSettings.offset+"&limit=+feedSettings.pagelimit,
        dataType:'html',
        success: function (data) {
            console.log('AJAX loaded data okay....');
            console.log('Appending feed content...');
             $('#feed li:last').remove(); // remove load more link on success
            $('#feed').append(data);

        }
    });
    */
    var firstNewItemId = '#postId'+feedSettings.offset;
            console.log('First new item id: ' +firstNewItemId);
            var scrollDest = $(firstNewItemId).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({
                scrollTop: scrollDest - 20
            }, 500);
    feedSettings.offset = count; // update offset
    console.log('Start monitoring scroll...');
    $(window).on('scroll', checkScroll);
});

/* SCROLL HANDLER */

function checkScroll(e) {
    console.log('Checking scroll...');
    if ($(this).scrollTop() >= feedSettings.scrollPosTrigger) {
        console.log('Stop monitoring scroll as we\'re at the end...');
        $(this).off('scroll', checkScroll); // stop monitoring scroll
        console.log('Adding "Show more" link');
        $('#feed').append('<li class="show-more">Show more &raquo;</li>');

    }
}

/* LOAD NEXT BUTTON */

$('.show-more').live("click", function() {
    $(this).html('Loading next '+feedSettings.pagelimit+'&hellip;');
    $(this).addClass('active');
    setTimeout(function(){ // simulate AJAX load speed
        $('#feed').trigger('ajaxLoadNext');
    },
    1500);
    //$('#feed').trigger('ajaxLoadNext');
});

function initScrollLoader() {
    var scrollPosOffset = Math.round($('#feed').height() * feedSettings.percentageOffset); // 15% of viewport height
    //alert('viewport: '+( $(window).height() + $ratio) );
    feedSettings.scrollPosTrigger = $(document).height() - $(window).height() - scrollPosOffset;
    console.log('scrollPostrigger: ' + feedSettings.scrollPosTrigger);

    $(window).on('scroll', checkScroll);
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Scroll Loader Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://gist.github.com/1592132.js?file=scrollLoader.js"></script>
	</head>
	<body>
	<ol id="feed">
	</ol>

	<script>
	$(document).ready(function() {
	initScrollLoader();
	});
	</script>
	</body>
	</html>
	/*
	SETTINGS
	*/

	var feedSettings = {
	percentageOffset: 0.15,
	pagelimit: 10,
	offset: 0
	};

	/*
	GENERATE SOME DUMMRY FEED ITEMS
	*/
	var pageMax = feedSettings.offset + feedSettings.pagelimit;
	for (i=feedSettings.offset; i < pageMax; i++){
	$('#feed').append('<li id="postId'+i+'">Another feed item ' + i + '</li>');
	}
	feedSettings.offset = i; // update offset

	/* AJAX CONTENT LOADER */

	$('#feed').on('ajaxLoadNext', function(e) {
	console.log('ajaxLoadNext()');
	$('#feed li:last').remove(); // remove load more link on success
	var pageMax = feedSettings.offset + feedSettings.pagelimit;
	console.log('pageMax: ' + pageMax);

	for (count=feedSettings.offset; count < pageMax; count++) {
	$('#feed').append('<li id="postId'+count+'">Another feed item ' + count + '</li>');
	}

	/* PLACEHOLDER: This is where you would do you real AJAX call
	$.ajax({
	type: "POST",
	url: "acitivityFeed.jsp",
	data: "offset="+feedSettings.offset+"&limit=+feedSettings.pagelimit,
	dataType:'html',
	success: function (data) {
	console.log('AJAX loaded data okay....');
	console.log('Appending feed content...');
	$('#feed li:last').remove(); // remove load more link on success
	$('#feed').append(data);

	}
	});
	*/
	var firstNewItemId = '#postId'+feedSettings.offset;
	console.log('First new item id: ' +firstNewItemId);
	var scrollDest = $(firstNewItemId).offset().top;
	$("html:not(:animated),body:not(:animated)").animate({
	scrollTop: scrollDest - 20
	}, 500);
	feedSettings.offset = count; // update offset
	console.log('Start monitoring scroll...');
	$(window).on('scroll', checkScroll);
	});

	/* SCROLL HANDLER */

	function checkScroll(e) {
	console.log('Checking scroll...');
	if ($(this).scrollTop() >= feedSettings.scrollPosTrigger) {
	console.log('Stop monitoring scroll as we\'re at the end...');
	$(this).off('scroll', checkScroll); // stop monitoring scroll
	console.log('Adding "Show more" link');
	$('#feed').append('<li class="show-more">Show more »</li>');

	}
	}

	/* LOAD NEXT BUTTON */

	$('.show-more').live("click", function() {
	$(this).html('Loading next '+feedSettings.pagelimit+'…');
	$(this).addClass('active');
	setTimeout(function(){ // simulate AJAX load speed
	$('#feed').trigger('ajaxLoadNext');
	},
	1500);
	//$('#feed').trigger('ajaxLoadNext');
	});

	function initScrollLoader() {
	var scrollPosOffset = Math.round($('#feed').height() * feedSettings.percentageOffset); // 15% of viewport height
	//alert('viewport: '+( $(window).height() + $ratio) );
	feedSettings.scrollPosTrigger = $(document).height() - $(window).height() - scrollPosOffset;
	console.log('scrollPostrigger: ' + feedSettings.scrollPosTrigger);

	$(window).on('scroll', checkScroll);
	}