Question

I have a select tag:

           <select size="3"> 
           <option value="1">value 1</option> 
           <option value="2">value 2</option> 
           <option value="3">value 3</option> 
           <option value="4">value 4</option> 
           <option value="5">value 5</option> 
           <option value="6">value 6</option> 
           <select> 

Now it displays first 3 options,
how can I scroll to see elements from 3-5 or 4-6 using jQuery or pure JavaScript?

Answer 1

.scrollTop() may work:

$('select').scrollTop(30);

And you can scroll to a particular element using this:

var $s = $('select');

var optionTop = $s.find('[value="3"]').offset().top;
var selectTop = $s.offset().top;

$s.scrollTop($s.scrollTop() + (optionTop - selectTop));

Try it here: http://jsfiddle.net/kj9p4/

Note: does not work in Chrome.