Javascript jQuery对话框UI会不确定地滚动到顶部

我正在编写某人的代码，他们在所有弹出窗口中使用jQueryUI对话框。问题是，页面一直滚动到顶部，而对话框留在打开的位置。代码如下：

$('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;
});

我尝试了

e.preventDefault（）

，

返回false

，但它仍然会滚动到页面顶部

我正在从锚点调用对话框：

我需要改变调用对话框的方式吗？还是我做错了什么

这里有一个链接，您可以进行测试：

test.persogenics.com/hire/interview-guide/

只是尝试将对话框“打开”放入常规js函数中-不起作用-仍然会滚动到顶部：

js:
function popup() {
    $('#contact-popup').dialog()
    return false;
};

html:
<button onClick="popup();">Click Me</button>

js:
函数popup（）{
$（“#联系人弹出窗口”）.dialog（）
返回false；
};
html:
点击我

---

这意味着这不是一个锚定问题，。。对吗？

问题可能是您使用的锚URL指向页面内的锚 通常的做法是将“javascript:void（0）”作为href传递，在您的例子中，您通过它的href检测特定的锚定，因此为了解决这个问题，您可以将一个类传递给指向对话框的锚定标记，并通过该标记进行选择。 也许是这样的

<a class="dialog_link" href="javascript:void(0)" >

---

}))

问题可能是您使用的锚URL指向页面内的锚 通常的做法是将“javascript:void（0）”作为href传递，在您的例子中，您通过它的href检测特定的锚定，因此为了解决这个问题，您可以将一个类传递给指向对话框的锚定标记，并通过该标记进行选择。 也许是这样的

<a class="dialog_link" href="javascript:void(0)" >

---

}))

找到了问题！事实证明，问题在于我创建了一个绝对定位的输入，以“欺骗”对话框UI，使其不自动聚焦于任何真实输入

<div id="contact-popup" style="display:none">

--> <input type='text' style='position:absolute; top:-9999px;' />

    <form method="post" action="../../email.php">
        <h5>Leave us your contact info and we'll get in touch.</h5>
        <div data-role="fieldcontain">
            <input type="text" name="first-name" value="" class="required">

--> 
请留下您的联系方式，我们会联系您的。

我猜这会破坏页面的视图，因为它会将页面推到顶部

现在我知道，不仅要注意如何编写jQuery，还要注意在弹出对话框中输入的内容

---

谢谢大家在这方面的帮助

找到了问题！事实证明，问题在于我创建了一个绝对定位的输入，以“欺骗”对话框UI，使其不自动聚焦于任何真实输入

<div id="contact-popup" style="display:none">

--> <input type='text' style='position:absolute; top:-9999px;' />

    <form method="post" action="../../email.php">
        <h5>Leave us your contact info and we'll get in touch.</h5>
        <div data-role="fieldcontain">
            <input type="text" name="first-name" value="" class="required">

--> 
请留下您的联系方式，我们会联系您的。

我猜这会破坏页面的视图，因为它会将页面推到顶部

现在我知道，不仅要注意如何编写jQuery，还要注意在弹出对话框中输入的内容

---

谢谢大家在这方面的帮助

我在想这里还有别的事。“防止”默认值将停止页面跳转，返回false也将停止跳转。还有其他可能涉及的代码吗？@Ohgodwhy-添加了另一段使用相同id的代码-不确定这是否是您的意思。感谢您的帮助我的页面没有滚动到顶部。。。（使用IE9）@tymeJV-yes-忘了提到这一点-它在IE9和Opera中运行良好-但在Firefox和Chrometh中会滚动到顶部这可能是由于附加的模式窗口，而不是您的点击事件。我不确定，但是如果我删除了模态背景的绝对位置，它会阻止滚动。我想这里还有其他的事情。“防止”默认值将停止页面跳转，返回false也将停止跳转。还有其他可能涉及的代码吗？@Ohgodwhy-添加了另一段使用相同id的代码-不确定这是否是您的意思。感谢您的帮助我的页面没有滚动到顶部。。。（使用IE9）@tymeJV-yes-忘了提到这一点-它在IE9和Opera中运行良好-但在Firefox和Chrometh中会滚动到顶部这可能是由于附加的模式窗口，而不是您的点击事件。我不确定，但是如果我删除了模式背景的绝对位置，它会阻止滚动。我也这么想-但是当你检查页面源代码时，任何地方都没有

id=“dialog”

的实例。是的，我试过

javascript:void（0）”

但没有用…我也这么想-但是当你检查页面源代码时，没有任何

id=“dialog”

的实例。是的，我试过

javascript:void（0）”

但没有用。。。