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

Question

我在我的网站上使用了 Google 表单。当提交按钮被按下时，页面不会回到顶部，并且会显示很多空白的白色空间，因为我们必须滚动屏幕才能提交表单。

这是我使用的表单代码： <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"> 注意：我没有 JavaScript 或 jQuery 的知识，所以可能需要一些详细的解释。谢谢。

- Syed Khizer

Answer 1

你可以使用两种选项。

1. 在iframe加载事件中添加jquery脚本。
   

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

2. 向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>

第二个选项更可取，因为它适用于具有多个页面的表单。

- Poornamith

Answer 2

我遇到了类似的问题。在尝试一些建议时，我找到了一个解决方案。这个JavaScript解决方案在Flask中非常有效。在你的HTML文件中，考虑粘贴这个脚本，在你的iframe后面的部分。

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

</script>  

- alperen atik

Answer 3

这应该可以解决它：

<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

- roNn23

Answer 4

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

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

- Muuh Renai

---

实际上，正如我所提到的，我使用了Google表单，因此无法将href添加到按钮标记。 - Syed Khizer

哦，我明白了...你能把剩下的表单代码给我看一下吗？ - Muuh Renai