使用 jquery 单击时在 iFrame 内滚动

Question

我使用 iFrame 将一份工作申请表拉入另一个页面。如果用户点击提交并且页面上有错误，则会出现一个覆盖框（很像灯箱），向用户提供验证错误消息。它有一个“确定”按钮，然后关闭窗口。

我希望单击按钮将用户带回页面顶部，因为 iFrame 的高度约为 1000 像素。同样，这一切都发生在 iFrame 中。 iFrame 中的弹出窗口会将您带到 iFrame 顶部的锚点。这里没有跨域的疯狂。

我更喜欢用 jquery 来做这件事，因为我已经有一个与按钮关联的点击函数，但如果我必须使用老式的 Javascript DOM 方法，我会解决的。

我尝试了 scrollTo、动画、将锚附加到 iFrame 的 src，但没有任何效果。我也没有收到任何错误来指导我。任何帮助将不胜感激！

更新

if(errors > 0) {
    var header = "It appears there was a problem!";
    var message = "There are <b><u>"+errors+"</u></b> errors with your application.<br/><br/>";
        message += "<b>Please re-attach your resume once you have corrected the errors.</b>";

    jQuery("#infoMessage .infoText").html("<h2>"+header+"</h2><p>"+message+"</p>");
    jQuery("#infoMessage button").button();

    jQuery("button.okButton").click(function() {
        jQuery("#infoMessage").fadeOut();
        jQuery(".light_overlay").fadeOut();
        return false;

        //alert('testing');
        // Do not use .scrollTop() as it is deprecated.
        jQuery('body').prop('scrollTop', 0);
        // Additionaly, animate it.
        jQuery('body').animate({ scrollTop: 0 });

    });

    jQuery("#infoMessage").fadeIn('slow');
    jQuery(".light_overlay").fadeIn();

}

这是我被建议添加的最后一个 sn-p 代码，但它不起作用（注释掉警报后的 4 行）

Answer 1

假设您使用的是 jQuery，还有一些事情要记住，但比传统的 JavaScript 要少得多。

1. 滚动时使用“正文”而不是文档。
2. 使用 prop() 设置 scrollTop
3. 如果您要处理锚点上的点击事件，请始终调用 event.preventDefault()。

示例代码：

// Do not use .scrollTop() as it is deprecated.
$('body').prop('scrollTop', 0);

// Additionaly, animate it.
$('body').animate({ scrollTop: 0 });

Answer 2

您可以用<div> 包裹<iframe> 并使用绝对位置并将它的顶部和左侧设置为0。这将允许您将iframe 移动到您想要的位置以及允许您移动以编程方式设置滚动位置。

这里是一个例子：http://jsfiddle.net/BDC9Q/35/