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
} );
} );