title: ID anchors are scrolling slightly too far
body: <p>HTML for the section:</p>
  
  <pre><code>&lt;br style="clear: both;" /&gt;
  
  &lt;hr /&gt;
  
  &lt;section id="work" class="box-sub"&gt;
      &lt;h1 class="work"&gt;WORK&lt;/h1&gt;        
      &lt;div class="float-full"&gt;     
          &lt;a href="fold.php"&gt;&lt;img src="img/fold-tn2.png" class="thumbnail" /&gt;&lt;/a&gt;
          &lt;a href="ones-up.php"&gt;&lt;img src="img/ou-tn2.png" class="thumbnail" /&gt;&lt;/a&gt;  
          &lt;img src="img/temp.png" class="thumbnail" /&gt;
          &lt;img src="img/temp.png" class="thumbnail" /&gt;
          &lt;img src="img/temp.png" class="thumbnail" /&gt;
          &lt;img src="img/temp.png" class="thumbnail" /&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I'm only using the ID as an anchor, CSS for box-sub:</p>
  
  <pre><code>.box-sub {
      width: 90%;
      margin: 0 auto;
      padding-right: 40px;
      padding-left: 40px;
      padding-bottom: 40px;
      padding-top: 50px;
  }
  </code></pre>
  
  <p>The anchor is scrolling too far before stopping. I want it to stop above the <code>h1</code> work, but it's scrolling over it even though it's linked to <code>#work</code>, see below:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#top"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="scroll" href="#work"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="scroll" href="#info"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="scroll" href="#contact"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript below:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function($) {
          $(".scroll").click(function(event){     
              event.preventDefault();
      $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
      });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I've displayed the section IDs as block in the CSS but it doesn't help.</p>
  
  <pre><code>#work { display: block; }
  #info { display: block; }
  #contact { display: block; }
  </code></pre>