title: Scroll parent to top of child element
body: <p>I am trying to scroll a div so that a link inside of it appears on top. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
      scrollit();
    
    
  });
  
  function scrollit(){
    
     var elem= $("#link10");
           
   if(elem.length){
    console.log(elem.offset().top);
    $("#sidebar").animate({ scrollTop: elem.offset().top }, { duration: 'medium', easing: 'swing' });
   }
    
    
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#sidebar{
    
    height:80px;
    width:200px;
    overflow:scroll;
    
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id='sidebar'&gt;
           &lt;a href='#' id='link1'&gt;1&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link2'&gt;2&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link3'&gt;3&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link4'&gt;4&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link5'&gt;5&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link6'&gt;6&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link7'&gt;7&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link8'&gt;8&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link9'&gt;9&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link10'&gt;10&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link11'&gt;11&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link12'&gt;12&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link13'&gt;13&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link14'&gt;14&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link15'&gt;15&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link16'&gt;16&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link17'&gt;17&lt;/a&gt;&lt;br/&gt;
           &lt;a href='#' id='link18'&gt;18&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;br/&gt;&lt;br/&gt;
  &lt;a href='#' onclick='scrollit();return false'&gt;again&lt;/a&gt;</code></pre>
  </div>
  </div>
  At first, it will log the offset as being a certain distance (say 45), and will scroll to there correctly. Then, if it runs again, the logged distance is 0 and will then scroll to the top of the sidebar. It should say at that element.</p>