How to animate scroll to top of paragraph within div?

Question

I am quite new to jQuery and I cannot get the following code to work. I want to animate the scrolling of a certain paragraph within a div to the top, but somehow the animation fails to run.

Please find the code in this fiddle:

http://jsfiddle.net/SgNpP/9/

$(document).ready(function(){
$('#div1').scroll(function() {    
  var par1toTop = $('#par1').position().top;
  if ($('#div1').scrollTop() >= par1toTop) {
  var par5toTop = $('#par5').position().top;
      if ($('#div2').scrollTop() != par5toTop && par5toTop != 0) {
          //why can't I animate the scrolling here?
          $('#div2').animate({scrollTop(par5toTop)}, 800);
        }
    }
});
}); 

Answer 1

$('#aID').get(0).scrollIntoView();

This is code I currently have, which works... but links to an anchor object, not a div. Try it out :)

You can set your first element with a specific ID or empty anchor tag... then select it and use scrollIntoView

---

Alternatively you have two other options.

1) Animated scrollintoview() jQuery plugin.

2)

function Scroll_To(elem, pos)
{
    var y = elem.scrollTop;
    y += (pos - y) * 0.3;
    if (Math.abs(y-pos) < 2)
    {
        elem.scrollTop = pos;
        return;
    }
    elem.scrollTop = y;
    setTimeout(Scroll_To, 40, elem, pos);   
}

Both alternatives can be found in this post: scrollintoview animation