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 cl

Answer 1

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 class='closeButton'>Close</a>

Answer 2

If your buttons work with an html anchor tag with href="#" replace the href for example by href="javascript:;" or any other method that you use to disable the href. The reason why the scrolling happens is because of href="#" scrolls to the top of your page.

Answer 3

change your code like this

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

Answer 4

You can try :

scrollTo(0, jQuery("body"));