OK, so I’m not sure if this is best practice, but after testing the code by using a onclick rather than scroll, the pages do load appropriately. I have got round the issue of loads of results by adding a condition to only return true after the AJAX has completed;
// AJAX Posts
var pageNumber="0";
pauseAJAX = 'yes';
function load_posts(){
var cat = jQuery("#tabs li.active").attr("id");
jQuery(".aj_load").animate({'opacity' : 1}, 300);
pauseAJAX = 'yes';
pageNumber++;
var str="&cat=" + cat + '&pageNumber=" + pageNumber + "&action=load_more';
jQuery.ajax({
type: "POST",
dataType: "html",
url: ajaxurl,
data: str,
success: function(data){
var jQuerydata = jQuery(data);
if(jQuerydata.length){
jQuery(".aj_load").animate({'opacity' : 0}, 300);
jQuery("#data").append(jQuerydata);
pauseAJAX = 'no';
}
},
error : function(jqXHR, textStatus, errorThrown) {
jQueryloader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
return false;
}
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() + 400 > jQuery(document).height() - jQuery(window).height() ){
if(pauseAJAX == 'no') {
load_posts();
};
};
})
;