CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-forms
Syed Khizer
Syed Khizer

Reputation: 85

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

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

Upvotes: 5

Views: 6732

Answers (4)

roNn23
roNn23

Reputation: 1662

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

Upvotes: 1

alperen atik
alperen atik

Reputation: 31

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>

Upvotes: 2

Poornamith
Poornamith

Reputation: 304

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>

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

Upvotes: 11

Muuh Renai
Muuh Renai

Reputation: 5

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>

Upvotes: -2

Related Questions