title: jQuery .focus() causes page to jump
body: <p>I have a function that should scroll a user back to a search input at the top of the page, and <strong>then</strong> place focus on it (so the cursor is blinking). For some reason, it seems to apply the focus to the search input first. This creates a very quick jump/spazzy movement of the page to the search bar, jumps back to the bottom, and then scrolls up slowly.</p>
  
  <p>The Javascript:</p>
  
  <pre><code>function goToSearch(){
      $('html,body').animate({scrollTop: $('#search').offset().top},'medium');
      $('#search').focus()
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;input type="text" id="search" placeholder="search"&gt;
  ...
  &lt;a href="#" onclick="goToSearch()"&gt;Search&lt;/a&gt;
  </code></pre>
  
  <p>I've tried setting .delay() functions to no avail; it seems to always apply the .focus() first. Why is this happening?</p>