title: Scroll to a particular ID within an iframe while retaining parent page position
body: <p>I needed to be able to load a particular page in an iframe on demand, so I used a simple wrapper:</p>
  
  <pre><code>function updateFrame(url) {
      frames[0].location = url;
  }
  </code></pre>
  
  <p>Then I was asked to load the page to a particular point, which was non-trivial, since the pages were not within my control and there weren't always <code>&lt;a name&gt;</code> anchors to rely on. So some poking around showed that IDs could be used as anchors.</p>
  
  <p>That is to say, you can scroll to <code>&lt;div id = "somewhere-down-the-line"&gt;</code> with:</p>
  
  <pre><code>updateFrame("http://host/page#somewhere-down-the-line");
  </code></pre>
  
  <p>except this call also scrolls the entire viewport up so that the above <code>&lt;div&gt;</code> goes to the top and everything in the parent page above it scrolls out of view.</p>
  
  <p>How do I modify <code>updateFrame(url)</code> so that it scrolls the page within the <code>&lt;iframe&gt;</code> but leaves the rest of the page as it is?</p>
  
  <p>This hack worked for me on Firefox 20.0.1/Windows. Essentially, I load the page first, then jump to the target:</p>
  
  <pre><code>function updateFrame(url) {
      if (url.indexOf('#') &gt; -1) {
          mainPage = url.split('#')[0];
          frames[0].location = mainPage;
      }
      frames[0].location = url;
  }
  </code></pre>
  
  <p>I would like to be able to use this in other browsers as well. I have been trying to get it to work in Chrome. Maybe I'll even try Internet Explorer...</p>