[Resolved] Question for Waqar please

[Author]

Posts

[Pete]

Hi Waqar,

You kindly helped me with a code for auto scroll a few weeks back however...

I noticed a slight issue with this on a new Gutenberg page layout and can't work out why.

Code used is:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 250 }, 'slow');
});

On this page, at the bottom of the grid, pagination when clicked works great:
hidden link

This page, has a slightly different layout yet uses the same View set up:
hidden link

Yet when you click on pagination, the page scrolls to the bottom of the page, then scrolls up.
It's odd why the page pulls down 'before' scrolling up.

Any thoughts on why this may be please?

Thank you.

[Waqar]

Hi Pete,

Thanks for asking! I'd be happy to help.

Can you please share temporary admin login details, so that I can compare and troubleshoot, how both these views are set up in the admin area?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Pete]

Hi Waqar,

Any thoughts on this please?

We need to move forward and use this page to look at another solution.

Thank you.

[Waqar]

Hi Pete,

Thank you for waiting and I apologize for the delay in getting back on this.

During troubleshooting, I noticed that the behavior of the page scrolling to the bottom before going up, can be seen on both pages and it is only visible when moving to a page which has fewer results than the current one.
( on the "Norfolk Holidays" page, try to move to the last page "15" which has fewer results than the rest )

This is happening because the page's height is decreased, during the paginated results are being updated through the AJAX.

To improve this, I followed these steps:

1. In the "Output Editor" of the view "Holidays Sub Pages", I wrapped the view's results output inside a special div container:

[wpv-filter-meta-html]
<div class="special-container-wrap">
[wpv-layout-meta-html]
</div>

2. Next, I updated the custom script so that a min-height value equal to the height of the view's results output is assigned to the special div container, on page load as well as when the results are updated through AJAX pagination:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 250 }, 'slow');
	jQuery(".special-container-wrap").css({'min-height':(jQuery(".js-wpv-view-layout").height()+'px')});
});

jQuery( document ).ready(function() {
  	jQuery(".special-container-wrap").css({'min-height':(jQuery(".js-wpv-view-layout").height()+'px')});
});

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[Pete]

Hi Waqar,

Thank you very much for your thoughts and looking into this again.

Hmmm, it's still not right however I appreciate you've done as much as you can.

The footer still flashes just as the reload kicks in, it's very odd!
And I have just tested it with 'manual transition and page reload'. It's smoother and almost as fast.

Just frustrating it works when using the Elementor builder, but not the exact same layout in Gutenberg.
I guess Elementor is creating a container or similar so the auto scroll works regardless.

Frustrating that 'not' using a builder is casing more issues.

[Waqar]

Hi Pete,

Thanks for the update and sorry my recommendation didn't exactly work out.

Unfortunately, I'm out of ideas here, since I wouldn't rate myself an expert in JS. But for even better ideas and suggestions, perhaps you can discuss this over the dedicated community forums like:
hidden link
https://stackoverflow.com/

I hope this helps.

regards,
Waqar

[Pete]

Hi Waqar,

I may relook at this in the future. JS certainly seems your skill-set hence I was happy you helped me with this issue.

Something so simple, like auto scroll, is frustrating it wont work right. I have put the filter back to page reload on pagination which seems crazy however it's a quick and smoother.

I may look into this with another forum in the future however unsure any other person will come up with anything better than you.

Thanks all the same for your time.

[Waqar]

Hi Pete,

Thank you so much for your kind words.

Please feel free to get in touch anytime - we're here to help!

You're welcome to mark this ticket as resolved and start a new one for each new question or concern.

regards,
Waqar

[Pete]

Although not resolved, you can close this ticket. Thank you!