CODEWITHSUNDEEP
htmlrazorscrollbar
KeenUser
KeenUser

Reputation: 5525

fix vertical scrollbar position to 2nd row in div(cshtml)?

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 enter image description here

I am using 

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

Can you guys please help?

Thanks, Adarsh

Upvotes: 0

Views: 1327

Answers (2)

Misha Reyzlin
Misha Reyzlin

Reputation: 13916

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/

Upvotes: 1

Steve Adams
Steve Adams

Reputation: 2837

It seems I can't demonstrate this properly with jsfiddle, but here is a sample of code which works if you test it in a browser. Using anchors on each row, we can anchor the window to a specified location either using href or the url.

For example, if you implemented this code at www.address.tld/calendar, to show row two, you'd enter www.address.tld/calendar#row2.

You can use only an anchor on row two, and you could place it either statically or programmatically depending on your needs. It's a pretty straight forward solution, but some people don't like the hash and anchor name being in the url. It doesn't bother me.

Upvotes: 1

Related Questions