How do I prevent scrolling to the top of a page when popping up a jQuery UI Dialog?

Question

I currently use jTemplates to create a rather large table on the client, each row has a button that will open a jQuery UI dialog. However, when I scroll down the page and click on one of those buttons, jQuery dialog will open, but the scroll position get lost and the page jumps back to the top (with the blocking and the actual dialog showing off the screen). Has anyone seen or know what might cause this problem?

Thanks.

Answer 1

Seen this before but then I've used the following plugin to ensure scroll position isn't lost

http://plugins.jquery.com/project/ScrollTo

Answer 2

Are you using an anchor tag to implement the "button" that pops the dialog? If so, you'll want the click handler that opens the dialog to return false so that the default action of the anchor tag isn't invoked. If you are using a button, you'd also need to make sure that it doesn't submit (by returning false from the handler) and completely refresh the page.

For example,

$('a.closeButton').click( function() {
     $('#dialog').dialog('open');
     return false;
});


<a href='#' class='closeButton'>Close</a>

Answer 3

change your code like this

$('a.closeButton').click( function(e) { e.preventDefault(); $('#dialog').dialog('open'); });