Question

I have a div with a scroll bar which displays 15 months with 3 of the min each row, When the page loads I want to fix the scroll bar position to 2nd row as shown in my screenshot.As in the scroll bar should to be fixed to the position shown in my screenshot as opposed to top of the div.The reason for this requirement is we are displaying previous 3 months, but the user should see the current month when the page loads. I hope I have made it clear

I am using

<div id="key_dates" style ="overflow:scroll;width:960px;height:500px">

Can you guys please help?

Thanks,
Adarsh

Answer 1

You need to use JavaScript for this:

<!-- 
     Place this script before closing </body> tag so that
     DOM (HTML elements tree) is already built when the script is running 
-->
<script>
// create a closure to not pollute global scope
!function () {
  // cache reference to keyDates element
  var keyDates = document.getElementById('key_dates');
  // set scroll to the height of one row
  keyDates.scrollTop = 150; // substitute `150` with height of one row
} ();
<script>

Here is the documentation of element.scrollTop

If you are using jQuery, you do it like this (and here are the docs);

<script>
$('#key_dates').scrollTop( 150 );
</script>

An example with jQuery: http://jsfiddle.net/gryzzly/CjdwX/