如何使用jQuery / JS将列表框滚动到顶部

时间:2013-10-21 17:32:49

标签: javascript jquery listbox scroll

JSFiddle

在小提琴示例中,我有几次尝试在以编程方式选择项目后将列表框滚动到顶部(或列表中的任何点)。我无法找到一种有效的方法或SO上的一个例子来说明如何成功地做到这一点。下面是代码,或者你可以在JSFiddle上看到它。有人可以指出我正确的方向。

<select id='focusScrollTest' multiple='multiple'>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

$(document).ready(function(){
//return the current scroll position before selecting the last option
var x = $("#focusScrollTest").scrollTop();

//Displays 0
//alert(x);

//Select the last option value
$("#focusScrollTest option[value='9']").attr('selected', 'selected');

//return the current scroll position after selecting the last option
var y = $("#focusScrollTest").scrollTop();

//Displays 85
//alert(y);

///
///   These do not change the scroll
///
//$("#focusScrollTest option[value='1']").scrollTo();
//$("#focusScrollTest option[value='1']").scrollTo(0);
//$("#focusScrollTest").scrollTo(x);
//$("#focusScrollTest").scrollTo(0);
//$("#focusScrollTest").scrollTo(1);
//$("#focusScrollTest").scrollTop = 0;
//$("#focusScrollTest option[value='1']").scrollTop = 0;
//$("#focusScrollTest").focus();
//$("#focusScrollTest option[value='1']").focus();
//$("#focusScrollTest").blur().focus();
//$("#focusScrollTest option[value='1']").blur().focus();

//This is very interesting, even though it is done last the box
//still scrolled to the end
//$("#focusScrollTest option[value='1']").attr('selected', 'selected');

});

1 个答案:

答案 0 :(得分:9)

试试这个:

http://jsfiddle.net/jLzpU/

$('#focusScrollTest').scrollTop(0);