Pagination in blocks based archive view

Ce fil est résolu. Voici une description du problème et la solution proposée.

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 Il y a 2 années et 3 mois. 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.

Aucun de nos assistants n'est disponible aujourd'hui sur le forum Jeu d'outils. Veuillez créer un ticket, et nous nous le traiterons dès notre prochaine connexion. Merci de votre compréhension.

Ce sujet contient 2 réponses, a 2 voix.

Dernière mise à jour par Stephen Vaughan Il y a 2 années et 3 mois.

Assisté par: Christopher Amirian.

Auteur

Publications

août 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?

lien caché

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?

août 21, 2022 at 3:22 am #2441795

Christopher Amirian

Supporter

Les langues: Anglais (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.

août 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.