[Resolved] Scroll to top on pagination when there a multiple paginated views in a page

[Author]

Posts

[Tim Elliott]

Hi Support team,

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?

Thanks

[Shane]

Hi Tim,

Thank you for contacting our support forum.

This code is suppose to scroll it back to the scrollToTop div after the pagination correct?

Would you mind providing me with a link to the site so that I can have a look ?

Thanks,
Shane

[Tim Elliott]

Hi Shane

I'll need to give you login details to view the site - can you set me a private reply.

Thanks
Tim

[Tim Elliott]

Hi Shane

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.

I hope that makes sense.

Thanks
Tim

[Shane]

Hi Tim,

Could you try adding this to your callback ?

data.view_unique_id

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.

Please let me know if this helps.

Thanks,
Shane

[Tim Elliott]

Hi Shane

Got there with that info.

Thanks
Tim