title: Scroll element into view in scrollable container
body: <p>I have a scrolling container with a hard coded height:</p>
  
  <pre><code>.scrollingContainer {
      overflow: scroll;
      height: 400px;
  }
  </code></pre>
  
  <p>This scrolling container contains a list of items, when I click on the item I want to scroll the container so that the item clicked is at the top of the scrolling container.</p>
  
  <pre><code>$('.scrollingContainer li a').click( function(event) {
    var vpHeight = $('.scrollingContainer').height();
    var offset = $(this).offset();
    $('.scrollingContainer').animate({
      scrollTop: vpHeight - offset.top
    }, 500);
  });
  </code></pre>
  
  <p>Above is what I have currently, I'm having trouble with the mathematical calculation I need to perform. Also I think the <code>var offset</code> value is incorrect as it seems to be getting the offset from the top of the page where I was hoping to get the offset value based on it's position in the scrolling container.</p>
  
  <p>Any help appreciated! </p>