在 google 表单中按下提交按钮后如何使页面滚动到顶部？

Question

我在我的网站上使用了 google 表格。我在按下提交按钮时遇到问题，页面没有转到顶部并显示很多空白 space 因为我们在提交表单时必须往下走很多。

这是我使用的表格： <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc2zeeSoq25ZdSkWK5bY5uwp6NJ4r-PdzILlXAeuszyVwQlMA/viewform?embedded=true" width="100%" height="1800px" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

使用了这段代码，但它不起作用。 <form onsubmit="parent.scrollTo(0, 0); return true">

注意：我不了解 JS 或 Jquery，所以我可能需要一些详细的解释。谢谢

Answer 1

您可以只在提交按钮上使用 href="#header" 并放置 header 部分的 ID，它会滚动到顶部。 ^-^

<div id="header"></div>
<button href="#header">Submit</button>

Answer 2

您可以使用两个选项。

向 iframe 加载事件添加 jquery 脚本

<script>
  jQuery("iframe").load(function() {
    jQuery("html,body").animate({
      scrollTop: 0
    }, "slow");
  });
</script>

向iframe添加onload事件； onload="window.parent.scrollTo(0,0)"

< iframe src = "https://docs.google.com/forms/d/e/1FAIpQLSc2zeeSoq25ZdSkWK5bY5uwp6NJ4r-PdzILlXAeuszyVwQlMA/viewform?embedded=true"
  width = "100%"
  height = "1800px"
  frameborder = "0"
  marginheight = "0"
  marginwidth = "0"
  onload = "window.parent.scrollTo(0,0)" >
    Loading… 
</iframe>

The second option is recommended as it will work on forms with multiple pages.

Answer 3

我遇到了类似的问题。在尝试一些建议时，我遇到了一个解决方案。这个 JavaScript 解决方案在 Flask 中就像一个魅力。在您的 HTML 文件中，考虑粘贴此脚本，即您的 iframe 之后的部分。

<script>
document.querySelector("iframe").addEventListener("load", 
    function() {
        window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
});

</script>

Answer 4

这应该可以解决：

<iframe src="iframe.url.com" onload="loaded()"></iframe>
<script type="application/javascript">
  var loadCounter = 0;
  var loaded = function () {
  loadCounter += 1;
  if (loadCounter === 2) {
    window.scrollTo({top: 550, left: 0, behavior: 'smooth'});
  }
}
</script>

更多信息： https://medium.com/@richard.jones/a-trick-to-handle-varying-page-sizes-in-embedded-google-forms-4f21b71055ed

在 google 表单中按下提交按钮后如何使页面滚动到顶部？

How to make page scroll to top after submit button is pressed in google form?

html

javascript

css

jquery

google-forms