carasmo
12/14/2016 - 6:18 PM

load-more.js see https://sridharkatakam.com/load-posts-demand-using-ajax-genesis/ :: modified to scroll to top the loaded content

load-more.js see https://sridharkatakam.com/load-posts-demand-using-ajax-genesis/ :: modified to scroll to top the loaded content

//* reference: https://sridharkatakam.com/load-posts-demand-using-ajax-genesis/ 

jQuery( function( $ ){

	var page = 2,
	    loading = false;

	$( 'body' ).on( 'click', '.load-more', function(  ){
	
		if(  ! loading  ) {
			loading = true;
			$( this ).remove(  );
			var data = {
				action: 'be_ajax_load_more',
				nonce: beloadmore.nonce,
				page: page,
				query: beloadmore.query,
			};
												
			$.post( beloadmore.url, data, function( res ) {
				if(  res.success ) {
					$( '.post-listing' ).append(  res.data  );
					// $( '.post-listing' ).hide(  ).append(  res.data  ).fadeIn( 500 ); //* to have fadeIn effect
					// $( '.post-listing' ).append(  button  );
					page = page + 1;
					loading = false;
					
					//* scroll window it up to the top of the .post-listing
					var win = $(window).height(),
					y = $(window).scrollTop();
					$("html, body").animate({ scrollTop: y + win - 200 }, 1000);
					//* 200 is the height of the button and the padding + margin between entries and the tallest height of fixed header or whatever is fixed

				} else {
					//* console.log( res );
				}
			} ).fail( function( xhr, textStatus, e ) {
				//* console.log( xhr.responseText );
			} );
			
		}//* end !loading
				
	} );
	

} );