title: Why the vertical scroll bar moves automatically?
body: <p>I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ?
  I work with Firefox 3.6.3.</p>
  
  <p>HTML:
      </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="test.css" type="text/css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
          &lt;script language="JavaScript" src="test.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div&gt;
              &lt;table&gt;
                  &lt;tr row='0'&gt;&lt;td class='column1'&gt;Line 0&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='1'&gt;&lt;td class='column1'&gt;Line 1&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='2'&gt;&lt;td class='column1'&gt;Line 2&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='3'&gt;&lt;td class='column1'&gt;Line 3&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='4'&gt;&lt;td class='column1'&gt;Line 4&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='5'&gt;&lt;td class='column1'&gt;Line 5&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='6'&gt;&lt;td class='column1'&gt;Line 6&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='7'&gt;&lt;td class='column1'&gt;Line 7&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='8'&gt;&lt;td class='column1'&gt;Line 8&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr row='9'&gt;&lt;td class='column1'&gt;Line 9&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
      $(".column1").each(function(index) {
          $(this).after("&lt;td class='column2'&gt;Details " + index + "&lt;/td&gt;");
          $(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
                         function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
      overflow: auto;
      height: 100px;
      width: 300px;
      border: 1px solid blue;
  }
  
  .column1 {
      cursor: pointer;
      width: 100px;
      background-color: green;
      color: white;
  }
  
  .column2 {
      display: none;
      width: 200px;
      background-color: blue;
      color: white;
  }
  </code></pre>