在谷歌表單中按下提交按鈕后如何使頁面滾動到頂部？

Question

我在我的網站上使用了谷歌表單。 我在按下提交按鈕時遇到問題，頁面沒有轉到頂部並顯示大量空白區域，因為我們在提交表單時必須向下很多。

這是我使用的表格： <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

您可以使用兩個選項。

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>

推薦使用第二個選項，因為它適用於具有多個頁面的表單。

Answer 2

我有一個類似的問題。 在嘗試一些建議時，我遇到了一個解決方案。 這個 JavaScript 解決方案在 Flask 中就像一個魅力。 在您的 HTML 文件中，考慮粘貼此腳本，即 iframe 之后的部分。

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

</script>  

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-variing-page-sizes-in-embedded-google-forms-4f21b71055ed

Answer 4

您可以在提交按鈕上使用href="#header"並放置標題部分的 id，它會滾動到頂部。 ^-^

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