[Resolved] More than one view in a page and problems with scrollTop
This thread is resolved. Here is a description of the problem and solution.
Problem:
The issue here is that the user had multiple views on their page with a custom scroll to div code when their view paginates.
However each view that had the custom code wasn't scrolling to the correct div. Instead it was scrolling all the way to the top and triggering all the other scroll functions in the other views.
Solution:
To resolve this you will need to scope your code by ensuring that the code only fires when that particular view paginates.
How you can scope this inside the view callback function for pagination is by using the following variable "data.view_unique_id" which contains the ID of the view.
So a complete code example would look like.
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
*/
if( data.view_unique_id === 3495){
jQuery([document.documentElement, document.body]).animate({
scrollTop: $("#bildumako").offset().top
}, 2000);
}
});
This support ticket is created 4 years, 7 months 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.
Our next available supporter will start replying to tickets in about 1.85 hours from now. Thank you for your understanding.
I have pages with more than one view. The web is a historical multimedia archive , you can do custom searches, and the results are albums, photos and videos. Therefore the results pages contain 3 views, one for each of them. The 3 views are paginated, and the 3 have ajax transition.
The problem is that I would like each one to scroll at the view beginning (not page) when changing the page (1,2,3,...with pagination links of the view). but I don't get it.
Iam using this code:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: jQuery('#bildumako').offset().top }, 1000);
});
where I change the ID of the div (#bildumako) to be the destination of the scroll effect.
but it always takes me to the top (the div ID) of the first view makin stop effect in the others.
ok I add it on the callback function, but the problem is the same.
I have three views each on top of the other.
View 1
View 2
View 3
When click on the View 1 pagination the sroll goes to the bottom of the page (view3). When click the View 2 pagination it goes to the top and after it to the bottom (view 3). And if I click on the view 3 pagination it goes to the top of the page and after it to the bottom.
I want each view to go to its beginning.
Is the code not correct?
I have resolved the console error and neither. I have removed the code in two of the 3 views and every time the page event occurs the scroll goes to this view ( the one that contains the code) .
It's as if it affects all views
