[Resolved] On reaching the last page of results in pagination, scrolls down

[Author]

Posts

[daveG-7]

My search at hidden link has some strange functionality. When we use the pagination at the bottom of the search results, when you reach the last page (click 19) it scrolls down the page to the next section past the search. However, when you click any other page of results, it doesn't do so. I would like it to stop scrolling down when you reach the last page of results.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I tried to view the website's homepage, but it is behind a 'coming soon' page.

Can you please share temporary admin login details, in reply to this message?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the access details.

I couldn't find anything in the view's settings, that could result in this scrolling, and I couldn't reproduce this on my test website.

This suggests that some scripts from a third-party plugin are causing this, most likely the 'Slider Revolution' plugin.

As a quick workaround, I've included this custom script in the view's 'JS editor', that scrolls back to the top of the view's results, whenever pagination request is completed:

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
	*/
	
  	jQuery('html, body').animate({
        scrollTop: jQuery("#wpv-view-layout-946").offset().top
    }, 1000);
});

It would be interesting to test this with all non-Toolset plugins disabled and a default theme like Twenty Twenty-One.

If it's fixed, you can start adding the disabled items, one by one, to narrow down to a source of that scrolling script.

[daveG-7]

The plugin that's causing this is WPBakery Page Builder - when that's deactivated, the scrolling down stops when you reach the final page of results. However, that's a very important plugin for the site, so I can't just disable it. And your solution is better, but still pretty jarring to be scrolled down and then back up. Any further ideas?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing this update and glad that it is narrowed down.

I'm not very well aware of the 'WPBakery Page Builder' plugin's settings. It would be interesting if you could get in touch with their support team to see if there is some option to include their scripts in a safe/compatible mode.

[daveG-7]

Here's what WpBakery Page Builder support said: "The issue in this case seems to be due to the number of posts present on last page which is 3 while all the other pages has 9 posts. This seems to cause an issue with positioning of it's content.

The page builder does not have an option to include the scripts in safe mode.

A possible solution in this case can be to use custom JS code that will give a min-height to last page via CSS so that the page does not scroll down."

Then they suggested paying some contractors to implement that fix.

The do seem to be correct that it has to do with the number of items on the last page - if you click "Agricultural Leasing and Purchasing" under Find Resources then submit and click 2 in pagination, it gives you a 9 item last page, and doesn't then scroll down. Any thoughts on how to fix based on that information?

Thanks!

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi there

Waqar is off at the moment, so I thought I would take a look here.

I've been doing some testing on your website, and I'm not sure there is much we can do here.

I commented out the custom JS suggested by Waqar that you added so that I could see what the normal behaviour is, and I see the problem on the 19th page of results on the home page.

I updated the test page on your site to add the same View via the normal WordPress editor, rather than using WP Bakery.

There it works as you would expect, without this scrolling effect.

I compared the JS and CSS being loaded on the test page and on the home page. I identified a CSS file and a JS script that were specifically added by WP Bakery that are not included on the test page, and so I used the browser dev tools to prevent those loading on the home page to see if that fixed the problem. (The stylesheet or script could then be dequeued on that page, assuming there were no side effects.)

But it did not. The scroll effect still occurred.

Perhaps it comes from the slider at the top of the page, that seems like a possible culprit.

Given that you are using a slider to insert what is not actually a slider but is just a hero image at the top of the page, perhaps you might try removing the slider (that should confirm if it is the culprit), and if so use an alternative module to insert your large photo.

[daveG-7]

Thanks for your work looking into this. I've already confirmed that WpBakery Visual Composer is at fault for this issue, not the slider, because the issue occurs when ever plugin is disabled except WpBakery and the Toolset plugins, including when I switch to the 2023 theme (and including the slider). It also still occurs if i just disabled Revolution Slider, but leave everything else active. It's definitely an issue of how WpBakery is interacting with your plugins.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for writing back and sharing this update.

I agree with the findings of the WpBakery Page Builder's support.

The issue is not that some script is scrolling or sliding the page. What is happening is that the height of the view area decreases drastically, when the last page's results are loaded. There are only 3 results on the last page (1 row), whereas on the other pages, there are 9 (3 rows).

You can include the following script in the view's 'JS editor', which will get and set a 'min-height' value to the parent 'div' container of the view when the page loads:

jQuery( document ).ready(function() {
  jQuery(".js-wpv-view-layout-946").parents('.grve-column-content').css('min-height',jQuery(".results").parents('.grve-column-content').height());
});

This way, you'll not see any scrolling/sliding when the last page's results are loaded.

[daveG-7]

Thanks. I combined this with your scroll to the top of results code from before so you're not left in the middle of a bunch of empty space, and it worked well. Thanks for the great support!