title: Dynamic divs and scrollTop
body: <p>I have a single page site:</p>
  
  <p><a href="http://chiaroscuro.telegraphbranding.com/" rel="nofollow">http://chiaroscuro.telegraphbranding.com/</a></p>
  
  <p>Each section is dynamically sized based on the user's window. I'm trying to figure out how to have a jQuery smooth scroll function scroll to the top of each section when the link is clicked. It is working great for the first section, funding areas, where I just used a simple offset().top, but the others are not working because they don't know how far to scroll because the window size is always different.</p>
  
  <p>I've been trying to get offset() or position() to work, but no dice. I appreciate any advice.</p>
  
  <p>Here's my jQuery:</p>
  
  <p>`</p>
  
  <pre><code>$(document).ready(function () {
      var slowScrollFunding = $('#funding-areas').offset().top;
      var slowScrollAbout = $('#about-us').offset().top;
      var slowScrollProjects = $('#our-projects').offset().top + 600;
      panelOpen = true;
      $('#anchor-funding-areas').click(function(event) {
          event.preventDefault();
          if(panelOpen == true) {
              $('#slide-panel-content').stop(true, true).animate({height: '0px'}, 600, function() {
                  $('#panel-content-container').hide();
                  $('.scrollableArea').css('z-index', '11');
                  // Scroll down to 'slowScrollTop'
                  $('html, body, #home-wrap').animate({scrollTop:slowScrollFunding}, 1000);
                  panelOpen = false;
              });
          }else{
              $('html, body, #home-wrap').animate({scrollTop:slowScrollFunding}, 1000);
          };
      });
      $('#anchor-aboutus').click(function(event) {
          event.preventDefault();
          if(panelOpen == true) {
              $('#slide-panel-content').stop(true, true).animate({height: '0px'}, 600, function() {
                  $('#panel-content-container').hide();
                  $('.scrollableArea').css('z-index', '11');
                  // Scroll down to 'slowScrollTop'
                  $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollAbout}, 1000);
                  panelOpen = false;
              });
          }else{
              $('html, body, #home-wrap').animate({scrollTop:slowScrollAbout}, 1000);
          };
      });
      $('#anchor-ourprojects').click(function(event) {
          event.preventDefault();
          if(panelOpen == true) {
              $('#slide-panel-content').stop(true, true).animate({height: '0px'}, 600, function() {
                  $('#panel-content-container').hide();
                  $('.scrollableArea').css('z-index', '11');
                  // Scroll down to 'slowScrollTop'
                  $('html, body, #home-wrap').animate({scrollTop:slowScrollProjects}, 1000);
                  panelOpen = false;
              });
          }else{
              $('html, body, #home-wrap').animate({scrollTop:slowScrollProjects}, 1000);
          };
      });
      $('#header-logo').add('.homelink').click(function() {
          if(panelOpen == false) {
              $('.scrollableArea').css('z-index', '0');
              $('#panel-content-container').show();
              $('#slide-panel-content').stop(true, true).animate({height: '389px'}, 600, function() {
                  // Scroll down to 'slowScrollTop'
                  panelOpen = true;
              });
          };
      });
  });
  </code></pre>
  
  <p>`</p>