[Resolved] Make page refresh to top of Toolset grid rather than top whole page

[Author]

Posts

[Pete]

Hi there,

Just a general question.

Is it possible to make page with pagination refresh to top of Toolset grid rather than the top of the whole page?

It's not a huge issue however it's holding us back designing pages using a Toolset grid where we may have a large hero image, text then a Toolset grid.

If we do the above and you scroll to the bottom of the Toolset grid, click the pagination button, the whole page reloads right to the top.

When we have used the Essential Grid plugin in the past, this never an issue as it always reloads to the top of its grid.

Just wondering if this possible at all.

many thanks in advance.

[Pete]

Hi again,

Further to this I did a lot more digging about and saw this post:
https://toolset.com/forums/topic/scroll-top-after-pagination/

So I have changed settings in pagination and added: jQuery('html, body').animate({ scrollTop: 0 }, 'fast');

However, all this is doing is scrolling right to the top of the page, which this happens 'without' Ajax reload.

I guess my question still remains, can this reload just to the top of the grid, rather than the whole page?

This the text page in question: hidden link

Many thanks, Pete

[Waqar]

Hi Pete,

Thank you for contacting us and I'd be happy to assist.

To make sure that the script scrolls to the top of the view's output and not the entire page, you can update it slightly to:

jQuery( document ).on( 'js_event_wpv_pagination_completed ready', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout-26622").offset().top) - 100 }, 'slow');
});

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[Pete]

Hey Waqar,

Thank you for your time.

Added the exact code you have supplied however when the page loads, for the first time it scrolls, this before you touch anything.

Check it out: hidden link

[Waqar]

Hi Pete,

Thanks for writing back and sorry about the typo in the first line of the code.

The 'ready' event shouldn't be there:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout-26622").offset().top) - 100 }, 'slow');
});

regards,
Waqar

[Pete]

My issue is resolved now. Thank you!