title: jQuery Scroll To Div Not Working Properly
body: <p>This is some basic code testing jQuery animated scrolling:</p>
  
  <pre><code>$("#whatli").click(function(){
      link = $(this).data('link-to');
      $('#content').animate({scrollTop: $(link).offset().top},1000);
  });
  $("#myworkli").click(function(){
      link = $(this).data('link-to');
      $('#content').animate({scrollTop: $(link).offset().top},1000);
  });
  </code></pre>
  
  <p>The goal is to have it so when I click on a certain div that appears on a side menu, the page scrolls down to a designated div that is provided in the scrollees data attribute <code>link-to</code>. However my issue is this:</p>
  
  <p>When I try and scroll to the first div, it works. When I try and scroll to the second div from the first div, instead of going down the necessary space to bring the user to the div, it goes up the exact necessary space taking the user farther away. I imagine its just some simple issue I am overlooking but I cannot figure out how to go to one div from being at the other. The only thing that works flawlessly right now is scrolling to either of the divs from the absolute top of the page.</p>
  
  <h1>Edit:</h1>
  
  <h2>These are the HTML elements that provide the clicking functionality.</h2>
  
  <pre><code>&lt;li id="whatli" class="middle box-sizing m backdrop-color clickanimate" data-link-to="#what-i-do-section"&gt;
          &lt;div class="valign"&gt;
              &lt;img class="" src="//&lt;?php echo URL?&gt;public/img/layout-icon.png" width="25px" height="auto"&gt;
              &lt;div class="middle"&gt;What I Do&lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="myworkli" class="middle box-sizing m backdrop-color clickanimate" data-link-to="#my-work-section"&gt;
          &lt;div class="valign"&gt;
              &lt;img class="" src="//&lt;?php echo URL?&gt;public/img/carousel-icon.png" width="25px" height="auto"&gt;
              &lt;div class="middle"&gt;My Work&lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  </code></pre>
  
  <h2>These are the actual elements that are supposed to get scrolled to the top</h2>
  
  <pre><code>&lt;div id="what-i-do-section" class="section box-sizing" style="margin-    top:250px;"&gt; &lt;!--Lots of markup inside--&gt;
  &lt;/div&gt;
  
  &lt;div id="my-work-section" class="section box-sizing"&gt; &lt;!--Lots of markup inside--&gt;
  </code></pre>
  
  <p></p>