title: Twitter Bootstrap Modal scrolling the page up on show
body: <p>Clicking on a link which triggers a Twitter Bootstrap Modal to pop up is causing the browser to scroll up the page.  This behavior is only occurring in Chrome.</p>
  
  <p>Here is a demonstration page:</p>
  
  <p><a href="http://www.turizmburosu.com/test2.aspx">http://www.turizmburosu.com/test2.aspx</a></p>
  
  <p>The page has 600 rows of links, causing the page body to exceed window height. If any of these links is clicked, it displays the modal dialog.  When in Chrome, clicking any of the links below the initial view will cause the background page to scroll up (not always entirely to the top).</p>
  
  <p>I am use the following function to trigger the display of the Modal:</p>
  
  <pre><code>function test(id, imp) {
      $("#modalLabel").html("Header");
      $("#modalBody").html("Body");
      $("#myModal").modal("show");
  }
  </code></pre>
  
  <p>and the links are of the form:</p>
  
  <pre><code>&lt;a href="" onclick="test();return false;"&gt;Test Link ###&lt;/a&gt;
  </code></pre>
  
  <p>I am seeing this behavior in <strong>Chrome 22.0.1229.94 m</strong>.</p>
  
  <p>Any suggestions/ideas as to why this is happening and how to prevent it?</p>
  
  <p><hr></p>
  
  <h3>Additional Example</h3>
  
  <p>This can be recreated on the <a href="http://twitter.github.com/bootstrap/javascript.html#modals">Twitter Bootstrap documentation page for the Modal plugin</a>.</p>
  
  <p>Once on the page, simply override the existing data-api to use the JavaScript api instead:</p>
  
  <pre><code>$('#modals a[data-toggle="modal"]').on('click',
    function(e) {
      $('#myModal').modal('toggle');
      return false
    });
  </code></pre>
  
  <p>Now, if the <strong>Launch Demo Modal</strong> button is clicked, the page will scroll up when the modal is shown.</p>
  
  <p>Again, this is using Chrome.</p>