4

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

我希望单击按钮将用户带回页面顶部，因为 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 行）

4

2 回答 2

0

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

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

于 2012-11-01T19:05:35.500 回答
0

假设您使用的是 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 });
于 2012-11-01T18:48:12.670 回答