Skip Navigation

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

This support ticket is created vor 7 Jahre, 9 Monate. 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.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

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)

Dieses Thema enthält 1 Antwort, hat 2 Stimmen.

Zuletzt aktualisiert von Beda vor 7 Jahre, 9 Monate.

Assistiert von: Beda.

Author
Artikel
#422748

I am trying to: Load posts (Ajax - Infinite Scroll pagination) using versteckter Link

I visited this URL: versteckter 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.

Dieses Ticket ist jetzt geschlossen. Wenn Sie ein Toolset Kunde sind und Hilfe benötigen, eröffnen Sie bitte ein neues Support-Ticket.