title: How to prevent textarea from scrolling to the top when its value changed?
body: <p>Consider the following example: (<a href="http://jsfiddle.net/QGJeE/5/" rel="nofollow noreferrer">Live demo here</a>)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;textarea&gt;&lt;/textarea&gt;
  &lt;div id="button"&gt;Click Here&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>textarea {
      height: 80px;
      width: 150px;
      background-color: #bbb;
      resize: none;
      border: none;
  }
  #button {
      width: 150px;
      background-color: #333;
      color: #eee;
      text-align: center;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
      var textarea = $("textarea");
  
      textarea.val("Hello\nStack\nOverflow!\nThere\nAre\nLots\nOf\nGreat\nPeople\nHere");
  
      $("#button").click(function() {
          textarea.val(textarea.val() + "!");
      });
  
      textarea.scrollTop(9999).focus(); // Arbitrary big enough number to scroll to the bottom
  });
  </code></pre>
  
  <p>When the <code>#button</code> is clicked, <code>textarea</code> value changes, and for some reason the scroll bar goes to the top (I checked this in Firefox, not sure about other browsers).</p>
  
  <p>Why this is happening ?</p>
  
  <p>How could I fix that ?</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/3202791/how-do-i-stop-a-textarea-from-scrolling-to-the-top-whenever-i-change-its-value/3302664#3302664">here</a> one possible solution, but I wonder if there are other solutions.</p>