[Resolved] After previous or next pagination link scroll to the top of the div not the page

[Author]

Posts

[Rita]

In my view (Pagination enabled with manual transition and AJAX) I have pagination links displayed below the loop in the loop editor. I also have a little js snippet in the loop editor js box to make the pagination scroll to the top of the page when the user clicks the Previous or Next pagination links like so:

jQuery(document).on('click','.wpv-filter-previous-link,.wpv-filter-next-link', function() {
$('html, body').animate({ scrollTop: 100 }, 'fast');
});

I would like the 'scroll to top' function to scroll to the top of a particular location. Lets say, for example, a div (by id?) that would wrap the view in the the loop editor itself or in the template where the view is displayed. Or to an anchor or similar.

I have tried all the other 'scroll to specified location' ideas in other threads but cannot seem to get any to work.

Unfortunately, I am not very deft with jQuery... and am hoping you can help me out?
Many thanks in advance!
Rita

[Shane]

Hi Rita,

Try using the proper callback functions for the AJAX pagination action.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	jQuery('html, body').animate({ scrollTop: 100 }, 'fast');

});

This should work fine now.

Thanks,
Shane

[Rita]

Ah ok thank you very much Shane. Yes, that works beautifully.

[Rita]

My issue is resolved now. Thank you!