Set the scroll position of a listbox

I have a multiple select listbox. This listbox contains the names of many entities. Around 1000+. So as you can see it would be very annoying to scroll through. What I want to do is to display A-Z on the side vertically. When the user clicks a letter, javascript is fired to set the scroll position (NOT select the item) of the first occurring character selected. This is a control that is being created in c# and javascript being rendered using the client script manager. Basically what I have done so far is to add a new htmlanchor from a char array A-Z. This lists the alphabet vertically. This would be very similar to an iTouch/iPhone music library, touch/click the letter and the scroll is set to the first occurrence. I know how to loop through the list. So far I have an onclick function that acts as such:

private HtmlGenericControl alphaSortContainer;
this.alphaSortContainer = new HtmlGenericControl("div");
char[] alphabet = { 'Z'.......'A' };
for (int i = 0; i < 26; i++)
{
    var letter = new HtmlAnchor();
    link.InnerText = alphabet[i].ToString();
    link.Attributes.Add("onclick", "javascript:j开发者_高级运维umpToIndex('" + link.InnerText + "');");
    alphaSortContainer.Controls.Add(letter);
}

The above code adds (or should) letters stacked on top of each other. Their onclick will fire the javascript function and send in the letter.

My javascript so far:

function jumpToIndex(var index) {
    var list = document.getElementByID('" + this.list.ClientID + "');
    for(var i=0; i < list.length; i++) {
        if(list.options[i].value.charAt(0) == index) {
          HOW TO SET THE SCROLL POSITION TO MAKE THAT OBJECT THE TOP OF THE LIST BOX
          break; //pretty sure this is how i would break out of both loops.
        }
    }
}

I just need to scroll to the item that matches the if statement. Also, i am pretty sure that would be how I break out of both loops. Please help!

The only way to do this is to select one of the options in the select list, which you can do the following way:

<select id="myselect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected="selected">3</option>
  <option value="4">4</option>
</select>

Of course, if you don't want to make this choice serverside when you build the list or if you build the list clientside, you can always do it using javascript like this:

document.getElementById('myselect').options[<insert number>].selected = true;

and remember that <insert number> is zerobased

Now before you say i don't want to select it, just scroll to it, remember that if you see an option in a listbox, it is already selected by default.

Unless you are working with a multi-select selectbox in which case this is a whole different ballgame, and you are shit out of luck ;)

Have you considered not displaying the whole list but having javascript arrays for each letter. When a letter is selected the list is populated with just that letter's items?

var alphalist=new Array();
alphalist['a']=new Array('aardvark','acorns','apples');
alphalist['b']=new Array('baby','barley');
//etc
 function fill_list{selectedLetter){
  listItems=alphalist[selectedLetter];
  mylist=document.getElementById('mylist');
  mylist.length=0;.length=0;
  for(var i=0;i<listItems.length;i++){
    optionName = new Option(listItems[i],listItems[i])
    var length = mylist.length;
    mylist.options[length] = optionName;
  }
}