jQuery scroll down only the elements inside a DIV

Question

There is a DIV in my website and it is the css

div{
max-height:400px;
overflow:auto;
}

I'm going to create a button to scroll down only the elements inside this DIV to a certain position not the whole page. I mean I want to scroll down the DIV. I know how to do this for the whole page as this was asked before but I don't know how do this for a DIV.

Answer 1

In plain vanilla Javascript you can simply do:

document.getElementById('yourDiv').scrollTop = *position*;

Where position is the scroll position you wish to set.

If you want to scroll the div to the top of another element within it, you can use e.g.:

document.getElementById('yourDiv').scrollTop = document.getElementById('scrollToElement').offsetTop;

If you want to use jQuery, you can nicely animate the scroll- using:

$("yourDiv").animate({scrollTop:*position*}, '500', 'swing', function() { 
   // anything to do after scroll
});