[Resolved] Adding anchor link to search button

[Author]

Posts

[leoc-3]

Hi Guys,

There is any way I can add an anchor link to a search button? Or any way to make the page to scroll to the top of the results section rather than to the top of the page?

I have the website hidden link where toolset is used to filter the product catalogue (yes, they are products but without prices or add to cart for now, but they are woocommerce products)

The issue is that on mobiles, after a search (using the search filter on the sidebar) the page is refreshed with the results what is correct, but once it loads to the top of the page, some users can think that the search did not work once it keeps showing the filters at the top of the page, on desktop it is not an issue, but on mobile would be great if when an user press search the page result would scroll down to the results section, i really hope there is a solution for that

Many thanks as always
Cheers
Leo

[Nigel]

Hi Leo

From you description it sounds like your search works via a page refresh after the filters are submitted.

In that case, the page will reload with various URL parameters added relating to the search.

So I think the solution would be to listen to whether a matching parameter is included on the page load using JavaScript, and if so scroll the page to the results section.

In the code below I listen for the generic wpv_filter_submit parameter, and it assumes that there would only be one results section on the page (you only have a single such View on this page):

( function( $ ) {
	$( document ).ready( function(){

		var urlParams = new URLSearchParams(window.location.search);

		if ( urlParams.has('wpv_filter_submit') ){

			$('html, body').animate({
			    scrollTop: ($('.js-wpv-view-layout').offset().top)
			},500);
		}
	});
})( jQuery );

To add that, edit your View and in the Search and Pagination section use the custom JS box to insert the code.

[leoc-3]

Hey Nigel,

Thanks a lot man, it worked great exactly what i needed, but there a way to add space from the top, I notice that the script is scrolling the page until the results view are on the top, but because of the header spacing it kind cuts the title of the items found

Not sure if i was clear, basically i want to have what your code does but instead to go the very top could i have a offset of 10% from the top so it shows more or less below the header

many thanks man
Cheers
Leo

[Nigel]

Hi Leo

That's the way the offset calculation works, the measured top typically appears to cut off part of the visual top.

Try subtracting a fixed amount of px where it calculates scrollTop, take off, say, 50 from .top

[leoc-3]

Hey Nigel,

Thanks a lot for your help, I think it will be the solution i'm looking for, I tried to set the offset but I think I'm doing right, everytime i try to add a value on the offset () it seems to stop working not scrolling the page, could please confirm to me how to add the offset value, I tried the options below

( function( $ ) {
$( document ).ready( function(){

var urlParams = new URLSearchParams(window.location.search);

if ( urlParams.has('wpv_filter_submit') ){

$('html, body').animate({
scrollTop: ($('.js-wpv-view-layout').offset(50).top)
},500);
}
});
})( jQuery );

and also tried

( function( $ ) {
$( document ).ready( function(){

var urlParams = new URLSearchParams(window.location.search);

if ( urlParams.has('wpv_filter_submit') ){

$('html, body').animate({
scrollTop: ($('.js-wpv-view-layout').offset(50px).top)
},500);
}
});
})( jQuery );

Could please let me know if it is correct or how i should add the offset correctly?

Many thanks
Leo

[Nigel]

Sorry, like this:

            $('html, body').animate({
                scrollTop: ( $('.js-wpv-view-layout').offset().top - 100 )
            },500);