[Resolved] Jump to search results upon clicking search/submit button

[Author]

Posts

[CaseyK4294]

Tell us what you are trying to do?
I would like to jump to the search results on the page instead of the top upon clicking the Search button.

What is the link to your site?
nnl.454.myftpupload.com/?page_id=1052

[Minesh]

Hello. Thank you for contacting the Toolset support.

There is no such native feature available but you can easily achieve this by adding some custom JS to your View's "Custom JS and CSS" section's Custom JS box.

I've added the following custom JS code to your view's Custom JS box:

jQuery( document ).ready(function( $ ) {
	jQuery('html, body').animate({
        scrollTop: jQuery(".wp-block-spacer").offset().top
    }, 'slow');
});

You can customize it as per your requirement.

[CaseyK4294]

Thank you, I appreciate your help with this. This is almost what we are looking for. The only thing is we don't want the page to scroll to results upon the first loading, only when the search button is clicked. Is this possible?

[Minesh]

There is no such native solution available.

However - I've adjusted the JS code added to your view's JS box as given under:

jQuery( document ).ready(function( $ ) {
  
  var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
   
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
   
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};
var submit = getUrlParameter('wpv_filter_submit');
  if(submit=="SEARCH") {
			jQuery('html, body').animate({
        		scrollTop: jQuery(".wp-block-spacer").offset().top
    		}, 'slow');
  }


});

Can you please confirm it works as expected. You can adjust the code if require as per your requirement.

[CaseyK4294]

It works exactly as expected. My issue is resolved now. Thank you!