Smoothly scroll an overflowed divv to a particular position inside it

Question

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)?

i dont know about scrolling to a particular section but i know about scrolling to the top — Dev Man, May 17 '14 at 20:42
i found my answer [here](http://kadaj.github.io/tuts/smooth-scroll/smooth-scroll.html) — Gags, May 18 '14 at 07:01

score 1 · Accepted Answer · edited May 18 '14 at 13:09

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

Smoothly scroll an overflowed divv to a particular position inside it

1 Answers1