How to navigate to an HTML anchor after search
Do you want the Search Bar to navigate to an HTML anchor on the page after a search is performed? If so, you can add the following code to your site:
/**
* Modify the action of the Search Bar form to navigate to #site-content anchor after search
*
* @param string $url Where the form submits to.
*
* @returns string Modified URL with anchor added
*/
add_filter( 'gravityview/widget/search/form/action', function ( $url ) {
return $url . '#site-content';
} );Read here how to add these code samples to your website: Where to put code samples.
Multiple Views on the same page (e.g., tabs) #
If your page has multiple Views in separate tabs, the code above will send every search to the same anchor. To scroll to the correct tab after searching, map each View ID to its tab anchor:
add_filter( 'gravityview/widget/search/form/action', function ( $url ) {
$view_id = gravityview()->request->is_view() ? gravityview()->request->is_view()->ID : 0;
// Replace with your View IDs and tab anchors.
$anchors = [
123 => '#tab-2',
456 => '#tab-3',
];
if ( isset( $anchors[ $view_id ] ) ) {
$url = preg_replace( '/#.*$/', '', $url );
$url .= $anchors[ $view_id ];
}
return $url;
}, 20 );Tip: Each View is wrapped in a container <div> with an ID like gv-view-{View ID}-1 (see The View Container). If you set your tab IDs to match these container IDs, the page will scroll to the right tab automatically without any code.
