Scroll to search results on Views Exposed Filter submit button

Question

Hi I've made an 'Advanced Search' using Views + Display Suite in Drupal 7.

https://www.oldertenants.org.au/research-library-advanced-search

There's too many search filters so the default behavior of the submit button scrolling the user back to the top of the #content div confuses the user to think there are no search results.

How can I scroll the user to the results div instead (i'd also have to work out how to include a #results id in the results div) - or perhaps just not link to any div, simply refresh the results?

It would be ideal to achieve this using ajax but if its easy not a problem to be refreshing the page on search.

Thanks in advance for any suggestions!

Answer 1

You can do this in your theme when the page loads and has search results

Create search_results.js

(function ($) {

  'use strict';

  $(document).ready(function() {
    if( $('.views-row-1').length ){
      $("html, body").animate({ scrollTop: $(".views-row-1").offset().top }, "slow");        
    }
  });

}(jQuery));

which on page load sees if the first result is not empty and scrolls to it

Load file on specific view page

In your template.php

function THEMENAME_preprocess_views_view(&$vars) {
  $view = &$vars['view'];
  // Make sure it's the correct view
  if ($view->name == 'view_resources_advanced_search') {
    drupal_add_js(drupal_get_path('theme', 'THEMENAME') . 'js/search_results.js');
  }
}

Of course make sure you change THEMENANE and make sure the view machine name is correct in the template.php file

Answer 2

A different approach to solving this problem is to position the Exposed filters in the sidebar, instead of on the top of the results. You can do that using the option Exposed form in block.

That way Views results will always come to the top of the page, while filters will be displayed next to them (on wide screens at least).

This is assuming that restructuring your Advanced search page is an option. If "Featured Resources" isn't adding a lot of value, or isn't necessary to bait visitors away from the page, you can push those blocks down below the Exposed filters, or remove completely.

You can also use modules that add Autosubmit option for Exposed filters so results change faster, as soon as you change options, without the need to click on the "Submit" button. Better Exposed Filters is such a module. You can also group exposed filters into a collapsible fieldset that is closed on first load, getting the options that aren't often needed out of the way while still having them available if needed.