title: stop parent page from scrolling down to iframe
body: <p>I have embedded a website using iframe.
  Whenever the parent page loads, the embedded page makes the parent page scroll down to the iframe. I cannot change any code in the embedded page, only the parent page.
  Here's the [fiddle of the issue][1]:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;iframe src="http://store.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body { margin-top: 100px; height: 1000px; } 
  </code></pre>
  
  <p>How can I prevent the parent page from scrolling down to the iframe?</p>
  
  <p><strong>IMPORTANT UPDATE: ALMOST THERE</strong></p>
  
  <p>So we've added the following javascript to force the page to scroll bacl to the top:</p>
  
  <pre><code>window.addEventListener("scroll", runOnScroll);
  
  function runOnScroll(){
      window.scrollTo(0, 0);
      window.removeEventListener("scroll", runOnScroll);
  }
  </code></pre>
  
  <p>It does work as you can see [in this fiddle][2]. However, on the iPad and iPhone, you can clearly see the page scolling back then up again. On the PC, you can't see the transition.
  Please visit [this website][3] so you can check both transitions (pc and mobile).
  I'd like to know if there is anything we can add to the code so:</p>
  
  <ol>
  <li>the transition in mobile is not noticed like in the pc (<em>preferred choice</em>)</li>
  </ol>
  
  <p>OR</p>
  
  <ol start="2">
  <li>the transition is smoother (slower scrolling or something like that)</li>
  </ol>