弹出jQuery UI对话框时，如何防止滚动到页面顶部？

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?

我目前使用jTemplates在客户端上创建一个相当大的表,每一行都有一个按钮,它将打开一个jQuery UI对话框。但是,当我向下滚动页面并单击其中一个按钮时,jQuery对话框将打开,但滚动位置会丢失,页面会跳回到顶部(阻止和实际对话框显示在屏幕上)。有谁见过或知道可能导致这个问题的原因?

Thanks.

4 个解决方案

#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.

您是否使用锚标记来实现弹出对话框的“按钮”?如果是这样,您将需要打开对话框的单击处理程序返回false,以便不调用锚标记的默认操作。如果您使用的是按钮,则还需要确保它不会提交(通过从处理程序返回false)并完全刷新页面。

For example,

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


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

#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.

如果您的按钮使用带有href =“#”的html锚标记,则替换href,例如通过href =“javascript:;”或用于禁用href的任何其他方法。滚动发生的原因是因为href =“#”滚动到页面顶部。

#3

change your code like this

像这样改变你的代码

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

#4

You can try :

你可以试试 :

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

#1