title: Animate scrolling to top of element within an overflow div
body: <p>I am struggling to figure this out. I have a div that is set to <code>overflow: scroll;</code>. I want to be able to click a link and have the content in that div scroll to the top of the linked element. For some reason it always seems like it scrolls until the top of the element hits the top of the body. I need it to stop when it hits the top of the overflow div. In the example I have below when you click "link to paragraph 3" I need it to put paragraph 3 at the top of the scrollable div.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $("a").click(function(e){
      e.preventDefault();
      
      var anchor = $(this).attr("href");
      
      console.log(anchor);
        $(".parent").animate({
          scrollTop: $(anchor).offset().top - $(".parent").offset().top
        }, 2000);
  
  });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {background-color:tan;}
  
  .parent {height:100px; overflow-y:scroll; background-color:#ffff; margin-top:100px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;a href="#child3" class="child3"&gt;Link to paragraph 3&lt;/a&gt;
  &lt;a href="#child4" class="child4"&gt;Link to paragraph 4&lt;/a&gt;
  
  &lt;div class="parent"&gt;
    &lt;div id="child1"&gt;
    &lt;p&gt;&lt;strong&gt;paragraph 1&lt;/strong&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
    &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="child2"&gt;
    &lt;p&gt;&lt;strong&gt;paragraph 2&lt;/strong&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
    &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="child3"&gt;
    &lt;p&gt;&lt;strong&gt;paragraph 3&lt;/strong&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
    &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="child4"&gt;
    &lt;p&gt;&lt;strong&gt;paragraph 4&lt;/strong&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
    &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="child5"&gt;
    &lt;p&gt;&lt;strong&gt;paragraph 5&lt;/strong&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
    &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>