Q:

Smoothly scroll an overflowed divv to a particular position inside it

I have a scrolling div containing different sections of content. I am trying to make the div scroll to a particular section when i click on heading. My div is as below:
Here is fiddle link: http://jsfiddle.net/4Fx4a/1/
Here is a look at my code:
 <div class="callout panel" style="background-color:#535F6D;">
  <div class="row">
    <div class="large-4 medium-4 columns" style="height:100px;">
      <div class="callout" style="">
        <p style="color:#fff;font-size:11px;text-align:left;">
          Event cum exhibition
          <span style="text-transform:uppercase">
            <br/>
            Series 1
          </span>
        </p>
        <p style="color:#fff;font-size:12px;text-align:left">
          Series 2
        </p>
      </div>
    </div>
    <div class="large-8 medium-8 columns" style="border-left:1px dotted #fff;height:215px;overflow-y:scroll">
      <div class="callout">
        <p style="color:#fff;font-size:14px;text-align:left" id="series1">
         Series 1
          <br/>
          Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

        </p>

        <p style="color:#fff;font-size:14px;text-align:left" id="series2">
         Series 2
          <br/>
          Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

        </p>
      </div>
    </div>
  </div>

</div>

So when somebody clicks on the "Series 2" header, it should make the div scroll to "Series 2." How can I make the div scroll its content to that point smoothly (i.e. not as a single jump, but with an actual scrolling animation)?

A:

Using jQuery you can make a scroll Function
(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this;
    }
})(jQuery);

Then a quick way to call it
$('#series1').goTo();

then add an onclick event to the heading and bam 
   onclick="$('#series1').goTo();"

Here is a JSFiddle
you can alter the speed by changing fast to slow, etc

