I have a page with multiple views embedded in it.
View 1 is a slider view (which uses pagination for the slides to work).
View 2 is a list of posts with standard pagination.
I've added the following code to make the page scroll to the top of View 2 (id="scrolltop") when the user clicks the pagination:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
*/
document.getElementById('scrolltop').scrollIntoView(true);
});
Unfortunately View 1's automatic sliding also triggers this pagination and scrolls the page down to the start of View 2.
Is there a way to isolate the different pagination events so that the page only scrolls of the manual pagination?
I've recreated the problem on a site you can access:
hidden link
At the top is a Slider View that shows 3 images (with no manual transition).
Below it is a Site Archive View that has pagination. When you scroll right down to the Site Archive View pagination and change pages, the page scrolls to the top of the site archive view (this is the desired effect).
But when you click prev/next on the slider the page also scrolls to the top of the Site Archive View.
I need my Jquery to only act when the Site Archive View pagination is used.
This should provide you with the ID of the view that this callback is in. Then you can wrap this document.getElementById('scrolltop').scrollIntoView(true); in an if statement.
What I recommend that you do is to add .
console.log(data.view_unique_id)
To your callback and find the unique ID of the view in the console and then you can just use an if statement to check for that unique id.
