title: OnClick loads new HTML doc and should scroll to the bottom of it
body: <p>I'm making a simple interactive prototype consisting of different HTML documents with images and clickable div's in them to mimic the behavior of buttons in the prototype. Now I want to create the behavior of clicking a link at the top of the page which should scroll the user to the bottom of the page and show a specific part of the image (the behavior pretty much mimics remotely expanding and displaying a cell in an accordion control). </p>
  
  <p>Now I've searched for JS solutions for automatically scrolling to a certain part of a markup, problem is that I don't seem to be able to find an example for how to do so when a new HTML doc is loaded.</p>
  
  <p>I'm not sure if loading a new HTML does complicate things or not, but my lack of experience in web dev makes it for me seem very difficult.</p>
  
  <p>This is pretty much my approach now, which doesn't work:</p>
  
  <p>HTML doc 1</p>
  
  <pre><code>&lt;div #akebutton style="position:relative;
      top:-1137px;
      left:410px;
      width:33px;
      height:20px;
      border:1px solid #000;"&gt;
          &lt;a href="02_ake expanded.html"&gt;
              &lt;span style="position:absolute;width:100%;height:100%;top:0;left: 0;z-index: 1;"&gt;
              &lt;/span&gt;
          &lt;/a&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$("#akebutton").click(function() {
      $('html, body').animate({
          scrollTop: $("#bottomDiv").offset().top
      }, 2000);
  });
  </code></pre>
  
  <p>HTML doc 2</p>
  
  <pre><code>&lt;body&gt;
      &lt;img src="ake expanded.png" align="middle"&gt;
      &lt;div style="position:relative;top:-502px;left:167px;width:1069px;height:47px;border:0px solid #000;"&gt;
          &lt;a href="01_start.html"&gt;
              &lt;span style="position:absolute;width:100%;height:100%;top:0;left: 0;z-index: 1;"&gt;
              &lt;/span&gt;
          &lt;/a&gt;
  
      &lt;/div&gt;
  
      &lt;div id="bottomDiv"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript" src="maintainscroll.jquery.min.js"&gt;&lt;/script&gt; 
  
  &lt;/body&gt;
  </code></pre>