Question

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

我想点击按钮将用户带回页面顶部，因为iFrame的高度约为1000px。同样，这一切都发生在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();

}

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

Answer 1

假设您使用的是jQuery，仍然需要记住一些事情，但远不及传统的JavaScript。

滚动时使用'body'代替文档。
使用prop（）设置scrollTop
如果要处理锚点上的点击事件，请始终调用event.preventDefault（）。

示例代码：

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

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

Answer 2

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

以下是一个示例：http://jsfiddle.net/BDC9Q/35/

使用jquery在单击时在iFrame中滚动

2 个答案: