title: jQuery: scroll to the top of a div that has overflow: scroll;
body: <p><a href="http://codepen.io/lalka/full/qOQxeq/" rel="nofollow">Codepen Link</a></p>
  
  <p>I need on to scroll to the top of a div that has a fixed <code>height</code> and <code>overflow: scroll;</code>.</p>
  
  <blockquote>
    <p>JavaScript</p>
  </blockquote>
  
  <pre><code>$('button').click(function() {
    var $target = $('aside div:first-child');
    var scrTop = Math.abs($target.offset().top);
    $('html, body').animate({
        scrollTop: scrTop
      }, 400);
    console.log($target.offset().top)
  });
  </code></pre>
  
  <p>The issue is that <code>console.log()</code> returns negative integer of the<code>offset.top</code> method, which should not happen in normal circumstances.</p>
  
  <p>I tried different approaches but couldn't find a way.</p>
  
  <p>Is that even possible?</p>
  
  <p><strong>Steps to reproduce:</strong></p>
  
  <ol>
  <li>Scroll to the bottom of the <strong>pink</strong> <code>div</code> with <strong>green</strong> <code>divs</code> inside.</li>
  <li>Click the <code>button</code></li>
  <li>Open Dev Tools and see what <code>console.log();</code> returns</li>
  <li>And the scroll to the top of the green <code>div</code> doesn't happen.</li>
  </ol>
  
  <p>Any ideas?</p>