Firing JS after pagination to scroll to top of element

[Josh]

Hi,

I’m looking for a way to insert some Javascript to scroll to the top of the event list after pagination. Is there a js pagination function that Events Calendar uses that I could use to do that? Right now when the pagination completes I have to scroll back up to the top of the events list and that’s not really a great user experience.

Hopefully I’m making sense.

Here’s an example. I use Toolset to display some other custom post types and after the pagination completes I fire some JS so that it scrolls to the top of the results element:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
    jQuery('html, body').animate({ scrollTop: jQuery('#results').offset().top - 150 }, 500);
});

Do you guys have anything like that? I appreciate your help!

[Nico]

HI there Josh,

Thanks for reaching out to us on this! I can help you here 🙂

Can you please let me know which are the views that are not scrolling to the top when paginating? As far as I could test all the 3 views enabled in your site are taking the user up the calendar when next/prev links are clicked. Maybe you just want the animated effect?

Please let me know about it,
Best,
Nico

[Josh]

Thanks for the reply, Nico.

Between the time I posted yesterday and when you saw the site, I changed that page. It’s currently using the default calendar page, set in the Events Calendar settings.

Before, I had embedded the calendar with a shortcode and it wasn’t working this way. So I was curious if it had something to do with the shortcode. It seems it did.

So I suppose at this point my issue is solved, but I am curious if you still have the javascript I would be looking for. I have several use cases in my head for future sites and it would be nice to put it into my tool chest. Sometimes embedding a calendar further down the page suits the experience better and in those use-cases I’d like to be able to bring the visitor to the top of the calendar view when they paginate.

Specifically it would be for paginating through the main calendar list view or the tablet-mobile weekly view. But if it’s out of the way for you, don’t worry about it.

Thanks again.

[Nico]

Thanks for the feedback Josh!

Give me a bit of time to looks into this and see if it’s actually a bug (in the shortcode) or not. And also to find if there’s a JS event for pagination, which I’m mostly sure there is.

Have a great weekend and thanks for the patience while I work on this,
Nico

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts