Follow up on this:
jQuery.fn.almComplete = function(alm){
if(!$("body").hasClass("loadedList")) {
setTimeout(function(){
$("body").addClass("loadedList");
pos = jQuery("#list").height();
}, 2000);
} else {
$("body, html").animate({scrollTop:'+=' + pos + 'px'}, 1000).offset().top;
}
}
Basically I am checking if the body has a class on content loaded, if it does not, I am awaiting for 2 secs for all content to be properly loaded and layed out with isotope (masonry) and setting a global var for the container height. Afterwards when loading new content, I am skipping to set the height as the body has the class and I am scrolling to that var height px.
Since I am loading different amount of content if we are on mobile I am doing this in my index.php
<div id="list" class="cs-style-5">
<?php function detectmobile(){
$agent = $_SERVER['HTTP_USER_AGENT'];
$useragents = array (
"iPhone",
"iPod",
"Android",
"blackberry9500",
"blackberry9530",
"blackberry9520",
"blackberry9550",
"blackberry9800",
"webOS"
);
$result = false;
foreach ( $useragents as $useragent ) {
if (preg_match("/".$useragent."/i",$agent)){
$result = true;
}
}
return $result;
}
if (detectmobile() == true) { ?>
<?php echo do_shortcode('[ajax_load_more post_type="page" seo="true" posts_per_page="4" scroll="false" button_label="+ MORE WORKS +" pause="false"]');
} else { ?>
<?php echo do_shortcode('[ajax_load_more post_type="page" seo="true" posts_per_page="10" scroll="false" button_label="+ MORE WORKS +" pause="false"]'); ?>
<?php } ?>
</div>
</div>
So I am loading only 4 posts if we are on mobile and 10 if we are on desk. Since we are loading only 4 posts, when on mobile I need to scroll to half of the container height like this:
if(!$("body").hasClass("loadedList")) {
setTimeout(function(){
$("body").addClass("loadedList");
pos = jQuery("#list").height();
}, 2000);
} else {
var newPos = pos / 2;
$("body, html").animate({scrollTop:'+=' + newPos + 'px'}, 1000).offset().top;
}
not sure if this is the proper solution but it is A solution. Hope it helps