javascript - 如何使列表框中的选定项目滚动到顶部？

Question

我从数组项中创建了一个简单的列表。如果列表很大，会出现滚动条。但是，我的问题是 - 当一个项目被选中时，我希望看到该项目到可见位置的顶部，将所有隐藏在滚动条下方的项目推到上面。所以无论我选择什么项目，它都应该在可见列表框的顶部。这与将项目定位到顶部不同，只是在滚动顶部。希望我的问题在这里得到理解。

感谢我能得到的任何帮助或指导。

Answer 1

您可以使用以下代码：

$('#scrollable li').on('click', function(e){
    $('#scrollable').animate({scrollTop: $(e.target).position().top + $('#scrollable').scrollTop()});
});

另请参阅此 JSFiddle：http: //jsfiddle.net/729nX/1/

Answer 2

经过多次谷歌搜索，我发现您可以使用 javascript 使用scrollTo()和类似的代码

function scrollToElem(elem) {    
    if(pageElement != null){               
        window.scrollTo(elem.offsetTop, 0);    
    }
}
var elem= document.getElementById('your_element');
scrollToElem(elem);

或使用使用location.hash在我看来这是最简单的解决方案，仅使用以下几行

location.hash = '#' + 'your_element';

Answer 3

如果您在元素中而不是整个窗口中有滚动条。

Element.scrollTop - MDN

Element.scrollTop - W3 学校

function onSelect(list, selectedItem){
    list.scrollTop = selectedItem.offsetTop - list.offsetTop;
}