Page jumps to top when form loads

  • Profile Image
    Bainn
    Asked on August 31, 2017 at 12:26 AM

    I've been using Jotform on a number of websites, so the following isn't isolated.

    I noticed pages with a form will return to the top after the form loads. How do I stop this?

    It doesn't happen every time, but it happens enough to cause an issue. The trick is to load the page and scroll down quickly. Once the form loads, it will jump back to the top of the page. 

  • Profile Image
    Mike_G
    Answered on August 31, 2017 at 01:05 AM

    I have tried loading your website then I immediately scrolled to the bottom. I was able to see what you mean. I see that the form is embedded using its embed script — Adding-a-Form-to-a-Web-Page

    Can try if embedding the form using its iframe embed code would make any difference, please? — Getting-the-Form-iFrame-Code

    Say this is the iframe embed code of your form:

    <iframe id="JotFormIFrame-72420422460949" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformpro.com/72420422460949" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no"> </iframe>

    <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-72420422460949"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

    Please do not include the part(s) highlighted in red when you embed the form to your website.

    onload="window.parent.scrollTo(0,0)" means that the page will scroll to the top when the form loads. (0,0) or (x,y) is the x and y axis of the web browser page.

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

  • Profile Image
    Bainn
    Answered on August 31, 2017 at 10:48 PM

    Thanks very much Mike_G for your response. 

    This worked, but created other problems...

    1. It creates markup errors. 
    2. It forces you to set a height, which I don't want to do in case it appears differently in various browsers and devices. Ideally, I'd set this to auto, which isn't an option for iframe.

    Is there an alternative solution?

  • Profile Image
    liyam
    Answered on August 31, 2017 at 11:53 PM

    Have you tried adding a nojump parameter in the embed script method to see if it works? 

    Example: <script scr="https://www.jotform.com/jsform/1231231231?nojump"></script>

    Looking forward to your update.

    Thanks.

  • Profile Image
    Bainn
    Answered on September 01, 2017 at 06:15 PM

    I've tried this on a separate website I maintain. See: https://www.citychurchchristchurch.co.nz/new

    I
    t's hard to tell if it's working. I still see a subtle jump on some page loads, but I don't know if that's for other reasons. 

    what do you think?

  • Profile Image
    jonathan
    Answered on September 01, 2017 at 06:47 PM

    I test it using your website, but I also could not see it happening. 

    Here is the video of my test.

    Let us know if the issue persist and becomes very apparent when using the form on the website.

  • Profile Image
    Bainn
    Answered on September 01, 2017 at 08:26 PM

    Awesome. Thank you so much for your prompt assistance.