title: Preventing fancybox returning to top of page
body: <p>In my website, I am using fancybox 2.1.5. when I open an image and close it I return to the top of the page unintentionally. The problem can be seen in the following minimal example</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;style media="screen" type="text/css"&gt;
          body {
              height: 100%;
          }
          html {
              height: 100%;
          }
      &lt;/style&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" media="screen" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href=#&gt;
          &lt;img src="http://placehold.it/1000x600"&gt;
      &lt;/a&gt;
      &lt;a class="fancybox" href="img/Gallery/500x600.gif"&gt;
          &lt;img src="http://placehold.it/500x600"&gt;
      &lt;/a&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function() {
              $('.fancybox').fancybox();
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You will see that if you open and close the second image you will find yourself at the top of the page. </p>
  
  <p>It appears that if I delete the initial style in the head</p>
  
  <pre><code>&lt;style media="screen" type="text/css"&gt;
      body {
          height: 100%;
      }
      html {
          height: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>The problem disappears. if I erase only the body style or the html style the problem also disappears. In order for the problem to appear both body and html heights must be to 100%</p>
  
  <p>Unfortunately I don't understand why this is happening. Can someone please explain?</p>
  
  <p>Note: I have found solutions and hacks to this problem but I would like to understand why this is happening</p>