title: jQuery Dialog UI scrolls to the top indefinably
body: <p>I'm working on someone's code and they used jquery UI Dialog for all the popups. The problem is that the page keeps scrolling to the top while the dialog is left wherever it was opened at. Here's the code:</p>
  
  <pre><code>$('body').on('click', 'a[href$="#dialog"]', function(e) {
      e.preventDefault();
      $('#contact-popup').dialog({
          title: 'Contact',
          modal: true,
          width: 328,
          show: {effect: 'fade', duration: 400},
          hide: {effect: 'fade', duration: 400},
          resizable: false,
          draggable: false,
          open: function() {
              $('#contact-popup form').show();
              $('#thanks').hide();
          }
      })
      return false;
  });
  </code></pre>
  
  <p>
  I've tried <code>e.preventDefault()</code>, <code>return false</code>, but it still scrolls to the top of the page.</p>
  
  <p>I'm calling the dialog from an anchor: <code>&lt;a href="#dialog"&gt;Click Here&lt;/a&gt;</code></p>
  
  <p>Do I need to change the way I'm calling the dialog? Or am I doing something wrong here?</p>
  
  <p>Here's the link so you can test it out: <code>test.persogenics.com/hire/interview-guide/</code></p>
  
  <p>Just tried putting the dialog 'open' into a regular js function - didn't work - still scrolls to the top:</p>
  
  <pre><code>js:
  function popup() {
      $('#contact-popup').dialog()
      return false;
  };
  
  html:
  &lt;button onClick="popup();"&gt;Click Me&lt;/button&gt;
  </code></pre>
  
  <p>this means it's not an anchor issue,.. right?</p>