Pagination in blocks based archive view

This thread is resolved. Here is a description of the problem and solution.

Problem:

Force Ajax pagination to scroll to a certain place on the page

Solution:

Add the Javascript below to your theme:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
        jQuery([document.documentElement, document.body]).animate({
        scrollTop: jQuery(".js-wpv-loop-wrapper .tb-grid-column:nth-child(1)").offset().top
    }, 300);
});

Change the selector in the code depending on your needs.

This support ticket is created 2 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 replies, has 2 voices.

Last updated by Stephen Vaughan 2 years, 3 months ago.

Assisted by: Christopher Amirian.

Author

Posts

August 19, 2022 at 2:18 pm #2440981

Stephen Vaughan

Screenshot 2022-08-19 at 3.10.46 p.m..png

Hi,

I have set up a view built with block with pagination applied loading with AJAX. I notice that when the user selects the next page that the next listings of posts doesn't scroll to the top item. The attached image demonstrates that they are left viewing the bottom of the view archive. Not sure if this is specific to views built with blocks?

hidden link

I did some digging around in Toolset support an eventually found the following jQuery:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery("html, body").animate( {scrollTop: 0}, "fast");
});

This works somewhat but, as you can see, the page leads with some blurb and images so the scroll top doesn't land on the archive, but rather above it. Is there some sort of offset I can use here?

August 21, 2022 at 3:22 am #2441795

Christopher Amirian

Supporter

Languages: English (English )

Hi there,

Would you please replace the code that you mentioned with this one?

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
        jQuery([document.documentElement, document.body]).animate({
        scrollTop: jQuery(".js-wpv-loop-wrapper .tb-grid-column:nth-child(1)").offset().top
    }, 300);
});

See if it helps.

August 21, 2022 at 5:18 pm #2442021

Stephen Vaughan

Thanks Christopher,

That did the trick. I changed the anchor slightly as there is a fixed top navigation and the scroll was landing the top of the archive underneath. I anchored to the class of the bottom two images in the gallery at the start of the page to compensate for this. The last two photos lans in the viewers sight when paginating but this is OK as it gives toe user some context of where they are on the page.