title: jQuery: move window viewport to show freshly toggled element
body: <p>I have a snippet of jQuery in doc ready which toggles a div containing a <code>textarea</code>:</p>
  
  <pre><code>$('div#addnote-area').hide(); // hide the div
  $('a#addnote-link').click(function() { // click event listener on link
       $('div#addnote-area').toggle(); // toggle the hidden div 
  });
  </code></pre>
  
  <p>The toggle works fine when clicking the link. The problem I'm having is that if <code>div#addnote-area</code> is below the browser's current viewport, it remains there when it's shown. I'd like the user's cursor to go to the textarea and for the whole textarea to be viewable in the window.</p>
  
  <p><a href="https://i.stack.imgur.com/1VttC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1VttC.png" alt="Click here to see an image"></a>
  </p>