Skip Navigation

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

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 5 replies, has 2 voices.

Last updated by Pete 3 months ago.

Assigned support staff: Waqar.

Author
Posts
#1670053

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.

#1670475

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

#1671759

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#1672029

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

#1673235

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#1673257

My issue is resolved now. Thank you!