[Resolved] Back to top when clicking the previous or next page

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

I add the previous and next page to the Views, how can I force the cursor back to the top of the page?

				<div class="pagination">
					<div class="page-item previous-item">[wpv-pager-prev-page][wpml-string context="wpv-views"]<i class="fas fa-caret-square-left"></i>[/wpml-string][/wpv-pager-prev-page]</div>
					<div class="page-item home-item"><a href="[wpv-post-url item='[wpv-search-term param='ebook-id']']"><i class="fas fa-home"></i><span class="toc">Index</span></a></div>
					<div class="page-item next-item">[wpv-pager-next-page][wpml-string context="wpv-views"]<i class="fas fa-caret-square-right"></i>[/wpml-string][/wpv-pager-next-page]</div>
              </div>

[Shane]

Hi Kelvin,

Are you referring to scrolling back to the top of the page once the pagination has been performed?

Can you let me know if your pagination is done using AJAX ?

From there I should be able to provide the exact code that is needed to get this done for you.

Thanks,
Shane

[kelvinL-2]

Dear Shane,

Yes, please

[Shane]

Hi Kelvin,

Add the following to the JS editor of your view.

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

This should initiate the scroll animation after your ajax pagination.

Thanks,
Shane

[kelvinL-2]

Dear Shane,

It's nice, how do I know more about the event name? Does Toolset have such information?

Best regards,

Kelvin.

[Shane]

Hi Kelvin,

Unfortunately we do not have any documentation about this.

However there is a short description of each of the functions when you're trying to insert them onto the JS editor.

To find this you would need to classic editor enabled. Then you would go to your views edit page and under the "Search and Pagination" section there should be an Editor. From there you can click the JS section of the editor and you will see a button for Frontend Events.

This will allow you to insert other callback functions as well as they have a short description.

Thanks,
Shane