How to set scroll loading to my page?

Add jquery to call The other product which is listed in different page, Each page contain only 20 Products. And Call that page in order by using This code.

$(document).ready(function() {
  var pageNum = 1;
  $('#more-product').click(function() {
    var $link = $(this);
    var url = $link.attr('href');
    if (url) {
      $.get(url, function(data) {
        $('#gallery').append(data);
      });
      pageNum++;
      if (pageNum < 20) {
        $link.attr('href', 'pages/' + pageNum + '.html');
      }
      else {
        $link.remove();
      }
    }
    return false;
  });
});

(function($){
$('div.product').live('mouseenter mouseleave', function(event) {
var $details = $(this).find('.details');
if (event.type == 'mouseenter') {
$details.fadeTo('fast', 0.7);
} else {
$details.fadeOut('fast');
}
});

$(document).bind('nextPage', function() {
var url = $('#more-product').attr('href');
if (url) {
$.get(url, function(data) {
$('#gallery').append(data);
});
}
});

var pageNum = 1;
$(document).bind('nextPage', function() {
pageNum++;
if (pageNum < 20) {
$('#more-product').attr('href', 'pages/' + pageNum + '.html');
}
else {
$('#more-product').remove();
}
});

$(document).ready(function() {
$('#more-product').click(function() {
$(this).trigger('nextPage');
return false;
});
});
})(jQuery);