Scroll to top on Shop

Hello,

On the shop page (ex: https://woodmart.xtemos.com/shop/), when selecting any filter, the page scrolls up to the top. However, it never scrolls all the way up – which can be seen on your demo. It is even more noticeable with fixed header – as part of the Page Title bar remains hidden.

Is there a way to fix this by overriding the JS in child theme?

Thank you.

Hi,

Yes, it scrolls to the page heading, not to the website top position.

Kind Regards

Hi Artem,

Thank you, but I think you may have misunderstood my question. When it scrolls up to the page heading (and the header is fixed), only 50% of the page heading is visible. Show it does not show all of the page heading – which looks odd.

Sorry, but there is no other options for this. We will check this case and try to find some workaround in the future.

Hi Artem,

So, actually, there are options – and we found two ways to fix this:

1. OLD: We overrode woodmart/js/functions.js in child theme (using a dequeue and requeue approach), then changed the function code

2. NEW: Much easier: we used this filter: add_filter( ‘woodmart_ajax_scroll_offset’, function(){ return 160; } ); (where 160 is the header size in our case). We found this within the woodmart_enqueue_scripts function

The above basically returns a negative figure for the scroll-to-top calculation (it takes the offset of the container minus this figure) so it’ll always take the user to the top of the page. That said, my recommendation would be that you add functionality to make it so one could override it to force the user to be taken to the top of the page.

A suggestion would be to add the logic so if the above filter returns false (i.e. add_filter( ‘woodmart_ajax_scroll_offset’, false )) it just scrolls right to the top straight away without any further calculation logic. Alternatively, you could add a separate filter which just overrides this functionality.

Please let me know what your thoughts are on this.

Try to set that filter to 0 and also use this filter to change the element

add_filter( 'woodmart_ajax_scroll_class' , function(){
	return 'html';
} );

Regards

Thank you, we’ll give this a try!

add_filter( ‘woodmart_ajax_scroll_class’ , function(){
return ‘html’;
} );

This works well if we need it to scroll top of the page. But, if you need to scroll the page into specific location after you click on a Filter in Archives page. You can simply do it by,

01. Assign a CSS id to the specific widget/area in the page (Ex. scrollarea). Then you can add this code to the Functions.php file

add_filter( ‘woodmart_ajax_scroll_class’ , function(){
return ‘#scrollarea‘;
} );

[Author]

Posts