Scrolling to bottom of the page when link clicked?

Question

I am opening jQuery dialog when a link is clicked. Dialog is opening fine, but the page is scrolling down to page so I can't see the dialog until I scroll up. How to can I avoid this?

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
            jQuery("#waitDialog").dialog({

            autoOpen: false,
            modal: true,
            height: 375,
            position: 'center',
            width: 400,
            draggable: true,                
            closeOnEscape: false,
            open: function (type, data) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).parent().appendTo("form");
            }
        });
    });
    function showDialog(id) {
            $('#' + id).dialog("open");     
    }
</script>
 <div id="waitDialog" style="display:none; cursor: default">        
    <table  class="ms-authoringcontrols"  style="border-top:1px black solid; border:1px black solid; height:70px "  >
    <tbody>
          <tr>
        <td class="ms-sectionheader ms-rightAlign">
            Please wait.
        </td>
          </tr>
    </tbody>
    </table>
  </div>

<map name="Map">
  <area shape="rect" coords="225,16,287,33" href="/_layouts/MyAlerts.aspx" onclick="javascript:showDialog('waitDialog');"  alt="My Alerts">
 </map>

Answer 1

The .click() event for your link should return false so that it is not followed, causing the page to jump to your element with the id .

$('a').click(function() {
  showDialog($(this).attr('href'))
  return false;
});

Answer 2

It sounds like you are having issues with an anchor tag. instead of href="/_layouts/MyAlerts.aspx"

can you use:

onclick='window.location = "/_layouts/MyAlerts.aspx";