title: jQuery Scroll To Section of Page
body: <p>I'm trying to build a new trendy one page website where I scroll to a section on the page.  I want to bring the "fixed" header to exactly where the content is.  I am using the Zurb Foundation.  This is what I have so far (some of the code found here):</p>
  
  <pre><code>  &lt;li&gt;&lt;%= link_to "Recent Work", "#", "data-scroll" =&gt; "recent" %&gt;&lt;/li&gt;
  
    $(document).ready(function() {
  $("a[data-scroll]").click(function() {
     var id = $(this).data("scroll")
      $('html,body').animate({
              scrollTop: $("#"+id).offset().top},
          'slow');
  });
   });
  
    &lt;div id="recent"&gt;some content&lt;/div&gt;
  </code></pre>
  
  <p>Problem I have is stated above. I want to bring my fixed header to exactly where this div is placed on the page. Please advise.</p>