在 iframe 中提交表单时滚动到 IFrame 顶部答案

【问题标题】：Scroll to top of IFrame when submit the form in iframe在 iframe 中提交表单时滚动到 IFrame 顶部
【发布时间】：2013-08-19 21:13:15
【问题描述】：

我有一个放置在 IFrame 中的表单。我添加了用于验证的 javascript 函数。未填写必填字段点击提交按钮时会出现错误提示。

表单包含超过 8 个字段。错误消息将显示在页面顶部。因此，当单击提交按钮时，它会停留在页面的底部。因此，错误消息是不可见的。

对于在 iframe 中向上滚动，我添加了以下代码，

parent.parent.window.scroll(0,0);

它将我带到 iframe 中的页面顶部。但是，跳过了 Javascript 验证。它不经验证就通过请求。

请帮我解决这个问题。

提前致谢

【问题讨论】：

标签： javascript html

【解决方案1】：

为错误的包装 div 设置一个 id，然后使用 JavaScript 的 window.location 在内部移动到这个 id，在 - 并且取决于 - 强制字段验证代码之后（您可以将其放在条件语句中）。使用示例：

<!DOCTYPE html>
  <html>
    <head>
      <script>
        function scroll(){
          window.location = '#error';
        }
      </script>
    </head>
    <body>
      <div id='error'>
        <p>Error: This is an error message.</p>
      </div>
      <iframe src="http://www.yahoo.com" width="400" height="800">
      </iframe>
      </br>
      <input type="button" onclick="scroll()" value="Scroll"></input>
    </body>
  </html>

你也可以使用jQuery平滑滚动到它：

http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery

【讨论】：