[Resolved] Recent posts page scrolls to top when using Ajax Pagination

[Zee]

My ‘Recent Posts’ page is all set up great, thanks to GeneratePress and WP Show Posts. I would like to use Ajax Pagination, and it works as intended, except that every time the ‘Load More’ button is clicked, the page also automatically scrolls to the top, instead of staying in place and waiting for the extra posts to load.

Help please?

[Leo]

Hi there,

Can you open a support topic in WPSP’s support forum?

Looks like you are using the pro version:
https://wpshowposts.com/support/area/pro-support/

Let me know 🙂

[Zee]

I was and didn’t get around to implementing stuff (pandemic) until the license expired. A little help please?

[Tom]

Hi there,

Something is taking over that button and forcing it to scroll to top. It’s even adding #top to the URL.

You’ll need to deactivate your plugins/custom functions to find the culprit.

[Zee]

Ah, I think I have an idea which plugin it is (table of contents with a ‘return to top’ button). Not sure why it’s taking over this here button though. Thanks for pointing me along!

[Zee]

I did a process of elimination to find out the culprit, but instead of my suspected plugin, it’s pointing me to GP Premium. The Ajax pagination button definitely works as intended when GP Premium is disabled. I went through my Elements and I don’t think there’s anything there that can be causing this (only Google Optimize and Analytics that applies to the home page).

I’ve also tried disabling the GP Premium modules, and the back-to-top bug occurs even when all modules are disabled. The bug only goes away when GP Premium itself is disabled.

Any ideas? Many thanks!

[Tom]

Hmm, there’s nothing in the plugin that appends #top to the URL.

The only thing in the plugin that affects scrolling is the smooth scroll option in Customize > General – is that option enabled?

[Zee]

Yes – and now that I’ve disabled it the pagination works as intended! And #top is now no longer added to the URL. Strange!

I’ve also added a snippet as described here: https://docs.generatepress.com/article/generate_smooth_scroll_elements/ so could it be possible that the snippet and the smooth scroll option are conflicting somehow? And also explain the #top, somehow?

[Tom]

Aha, that would do it! That snippet will use any URL with # as a smooth scroll item.

Try this instead:

a[href*="#"]:not(.wp-show-posts-read-more)

[Zee]

Replaced the code as you suggested and it all works now with both the snippet and smooth scroll option enabled. Thanks!

Do I even need the smooth scroll option enabled though, since I have the snippet?

[Tom]

Yes, the snippet relies on the option being enabled. Glad it helped!

[Author]

Posts