Skip Navigation

[Resolved] View jumps to the top of the list after ajax pagination (infinite scroll)

This support ticket is created 8 years, 1 month 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 1 reply, has 2 voices.

Last updated by Beda 8 years, 1 month ago.

Assisted by: Beda.

Author
Posts
#422748

I am trying to: Load posts (Ajax - Infinite Scroll pagination) using hidden link

I visited this URL: hidden link (Scroll down to the section: 'Recent Posts'

I expected to see:

Instead, I got:

The posts loads successfully as I keep scrolling but after each pagination is complete but jumps to the top of the list.

In mobile: the view scrolls back to the top of the list (Recent Posts)
In Desktop: the view scrolls up by couple of pixels.

In the pagination JS section, I've the following code:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.effect (string) The View AJAX pagination effect
* data.speed (integer) The View AJAX pagination speed in miliseconds
* data.layout (object) The jQuery object for the View layout wrapper
*/
runmasonry();
});

In the View's JS section, I've the following code:

function runmasonry() {
addthis.layers.refresh()
var $grid = jQuery('#recent-posts-main-view .grid').imagesLoaded( function() {
// init Masonry after all images have loaded

$grid.masonry({
// options...
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
columnWidth: '.grid-sizer',
percentPosition: true

});

});

I also have a JS in the footer-layouts.php

jQuery(function() {
var $grid = jQuery('#recent-posts-main-view .grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
columnWidth: '.grid-sizer',
percentPosition: true

});
});

});

#422795

If the issue persists, when you remove all Custom Code, then only we can tell if this is a Views Bug.

Please also first have a look at this potential HotFixes:
https://toolset.com/known-issues/?wpv-pr-child-of-download%5B%5D=308&wpv_post_search&wpv_aux_current_post_id=399043&wpv_sort_orderby=post_date&wpv_sort_order=desc&wpv_view_count=401205-TCPID399043&errata-status%5B%5D=1

The two below might be of great use:
https://toolset.com/errata/views-rollover-fade-transition-bumps-content/
https://toolset.com/errata/views-ajax-pagination-fails-form-results-rendered-separatedly/

Please apply this fixes, and try again.

Apart from that, I see that the View scrolls up again, but as far I see, it scrolls only as far up as you have been reading at the moment of no more posts.
This should be expected so far, as otherwise, you would loose track reading.

But I suspect, with above fix, the problem can be solved.

If not, we need to analyze this on a View using Toolset Features, before we can assume it is a Bug in views and not a conflict with Custom Code or the masonry framework, which seems to create often some troubles with Views.

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.