title: Force Inner-iframe Content to Scroll To Top On Pageload
body: <p>All of my website's 'content pages' open inside of an iframe on my index page.</p>
  
  <p>I am using a onload="scroll(0,0);" code in that iframe which successfully forces all of my 'content pages' to start at the 'top'.</p>
  
  <pre><code>  &lt;iframe id="iframe_A" name="iframe_A" onload="scroll(0,0);" src="Page1.html"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>So far, so good. </p>
  
  <p>However... within my website, I also have a 'subsite' (which also open's inside of iframe_A), yet has it's own iframe [iframe_B]. </p>
  
  <p>All of the subsite's content pages open inside of iframe_B.</p>
  
  <p>All good.... but, unfortunately... I haven't been unable to get the content pages for the subsite's iframe_B to open at the top the same way as they do in iframe_A.</p>
  
  <p>To better illustrate the issue I am having, I have included an extremely stripped down model (6 pages, including the 'Index Page') of the site, to represent the layout I am using.</p>
  
  <p>INDEX PAGE:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body{margin:0;}
  .header{width:100%; height:60px; background-color:blue;}
  .header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
  #iframe_A{width:100%; height:1700px;}
  .footer{width:100%; height:60px; background-color:blue; margin-bottom:20px;}
  .footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="header"&gt;&lt;a&gt;Index Header&amp;nbsp;&amp;nbsp;&lt;/a&gt;
  &lt;a href="Page1.html" target="iframe_A"&gt;Page 1&lt;/a&gt;&amp;nbsp;&amp;nbsp;
  &lt;a href="Page2.html" target="iframe_A"&gt;Page 2&lt;/a&gt;&amp;nbsp;&amp;nbsp;
  &lt;a href="Page3.html" target="iframe_A"&gt;Page 3&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;iframe id="iframe_A" name="iframe_A" src="Page1.html" scrolling="no" onload="scroll(0,0);"&gt;&lt;/iframe&gt;
  
  &lt;div class="footer"&gt;&lt;a&gt;Index Footer&amp;nbsp;&amp;nbsp;&lt;/a&gt;
  &lt;a href="Page1.html" target="iframe_A"&gt;Page 1&lt;/a&gt;&amp;nbsp;&amp;nbsp;
  &lt;a href="Page2.html" target="iframe_A"&gt;Page 2&lt;/a&gt;&amp;nbsp;&amp;nbsp;
  &lt;a href="Page3.html" target="iframe_A"&gt;Page 3&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PAGE 1</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body{margin:0px 0px 0px 20px;}
  .font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
  .top{margin-top:10px;}
  .bottom{margin-top:1640px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="top font"&gt;This is Page 1 in iframe_A (Top).&lt;/div&gt;
  &lt;div class="bottom font"&gt;This is Page 1 in iframe_A (Bottom).&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PAGE 2</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body{margin:0px 0px 0px 20px;}
  .font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
  .top{margin-top:10px;}
  .bottom{margin-top:1640px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="top font"&gt;This is Page 2 in iframe_A (Top).&lt;/div&gt;
  &lt;div class="bottom font"&gt;This is Page 2 in iframe_A (Bottom).&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PAGE 3</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body{margin:0px;}
  .header{width:100%; height:60px; background-color:red;}
  .header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
  #iframe_B{width:100%; height:1580px; }
  .footer{width:100%; height:60px; background-color:red;}
  .footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="header"&gt;&lt;a&gt;Page 3 (Subsite) Header&lt;/a&gt;
  &lt;a href="Page4.html" target="iframe_B"&gt;Page 4&lt;/a&gt;
  &lt;a href="Page5.html" target="iframe_B"&gt;Page 5&lt;/a&gt;
  &lt;/div&gt;
  &lt;iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no"&gt;
  &lt;/iframe&gt;
  &lt;div class="footer"&gt;&lt;a&gt;Page 3 (Subsite) Footer&amp;nbsp;&amp;nbsp;&lt;/a&gt;
  &lt;a href="Page4.html" target="iframe_B"&gt;Page 4&lt;/a&gt;
  &lt;a href="Page5.html" target="iframe_B"&gt;Page 5&lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PAGE 4</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body{margin:0px 0px 0px 20px;}
  .font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
  .top{margin-top:10px;}
  .bottom{margin-top:1520px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="top font"&gt;This is Page 4, in iframe_B (Top).&lt;/div&gt;
  &lt;div class="bottom font"&gt;This is Page 4, in iframe_B (Bottom).&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PAGE 5</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body{margin:0px 0px 0px 20px;}
  .font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
  .top{margin-top:10px;}
  .bottom{margin-top:1520px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="top font"&gt;This is Page 5, in iframe_B (Top).&lt;/div&gt;
  &lt;div class="bottom font"&gt;This is Page 5, in iframe_B (Bottom).&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In this model... Pages 1, 2 and 3 always open at the top of the page in iframe_A, no matter what page position you were at on the previous page... as they should.</p>
  
  <p>I am attempting to get content pages 4 and 5 (which open in 'iframe_B' on Page 3), to ALSO open at the top each time.</p>