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

Question

I have used google form on my website. I am having an issue when submit button is pressed, the page doesn't go to top and shows alot of blank white space as we have to go down alot in submitting the form.

Here's the form i used : <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>

Used this code but it doesn't work. <form onsubmit="parent.scrollTo(0, 0); return true">

NOTE: I don't have knowledge of JS or Jquery so i maybe needing some detailed explaination. Thankyou

Answer 1

There are two options that you can use.

1. Add a jquery script to the iframe load event
   

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

2. Add an onload event to the iframe; 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 2

I had a similar problem. While trying some advice, I came across a solution. This JavaScript solution works like a charm in Flask. In your HTML file, consider pasting this script, the part after your iframe.

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

</script>  

Answer 3

This should solve it:

<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>

More info: https://medium.com/@richard.jones/a-trick-to-handle-varying-page-sizes-in-embedded-google-forms-4f21b71055ed

Answer 4

You could just use a href="#header" on submit button and put the id of the header section, and it´ll scrool to the top. ^-^

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