How to prevent Drupal from scrolling to the bottom of ajax-appended content in a form I have a custom form in Drupal.

When a user first sees this form, the only thing on the page is a select box, along with a few other elements they have to fill out.

When they make a selection from the select box, the #ajax callback regenerates the form, and adds about 50 results to the page.

By default, Drupal is scrolling down to the last result.  This is a problem, because the users have to scroll back up to the elements near the top of the page to finish their work.

Is there a way to prevent Drupal from scrolling to the bottom of the newly-added form content?

Here is a snippet that shows how I'm setting up the form:

$form = array(
'#tree' =&gt; TRUE,
'#prefix' =&gt; '&lt;div id="myform"&gt;',
'#suffix' =&gt; '&lt;/div&gt;',
);


Here is a snippet from the select box that triggers returning the results.

$form['selectbox'] = array(
  '#type' =&gt; 'select',
  '#title' =&gt; t('Select box'),
  '#options' =&gt; $predefined_select_options,
  '#empty_option' =&gt; t('Select something!'),
  '#ajax' =&gt; array(
    'callback' =&gt; 'mymodule_form_ajax',
    'wrapper' =&gt; 'myform',
    'effect' =&gt; 'fade',
  ),
);

$form['other_stuff'] = array(
  '#type' =&gt; 'textfield',
  '#title' =&gt; t('Other stuff they need to fill out here'),
);

if (isset($form_state['values']['select box'])) {
  foreach ($lots_of_results as $result) {
    $form[$result] = array(
      '#type' = 'fieldset',
      '#title' = 'Lots of results in their own field sets',
    );
  }
  // It scrolls to the bottom of this huge list after it's rendered.
}


Here is the ajax handler for the select box.

function mymodule_form_ajax($form, $form_state) {
  return $form;
}
You could override the Drupal.ajax.prototype.success handler (/misc/ajax.js) in your theme  to control behavior, maybe commenting out Drupal.unfreezeHeight(); and Drupal.freezeHeight(); could do the job?
Just copy the whole function and manipulate it your own way.

/**
 * Handler for the form redirection completion.
 */
Drupal.ajax.prototype.success = function (response, status) {
  // Remove the progress element.
  if (this.progress.element) {
    $(this.progress.element).remove();
  }
  if (this.progress.object) {
    this.progress.object.stopMonitoring();
  }
  $(this.element).removeClass('progress-disabled').removeAttr('disabled');

  Drupal.freezeHeight();

  for (var i in response) {
    if (response.hasOwnProperty(i) &amp;&amp; response[i]['command'] &amp;&amp; this.commands[response[i]['command']]) {
      this.commands[response[i]['command']](this, response[i], status);
    }
  }

  // Reattach behaviors, if they were detached in beforeSerialize(). The
  // attachBehaviors() called on the new content from processing the response
  // commands is not sufficient, because behaviors from the entire form need
  // to be reattached.
  if (this.form) {
    var settings = this.settings || Drupal.settings;
    Drupal.attachBehaviors(this.form, settings);
  }

  Drupal.unfreezeHeight();

  // Remove any response-specific settings so they don't get used on the next
  // call by mistake.
  this.settings = null;
};


Another option would be to render the ajax form with ajax_commands where you could add custom js handlers to your callback.