Skip to content

Instantly share code, notes, and snippets.

@carasmo
Last active December 16, 2016 00:11
Show Gist options
  • Save carasmo/e62e90ee6704990960814a30a0c47dd2 to your computer and use it in GitHub Desktop.
Save carasmo/e62e90ee6704990960814a30a0c47dd2 to your computer and use it in GitHub Desktop.
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
} );
} );
@carasmo
Copy link
Author

carasmo commented Dec 16, 2016

Put it in the success area because it only worked on local server the old way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment