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

【问题标题】：How can I make selected item in listbox scroll to the top?如何使列表框中的选定项目滚动到顶部？
【发布时间】：2017-05-31 03:24:36
【问题描述】：

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

感谢您提供的任何帮助或指导。

【问题讨论】：

你有什么代码可以分享吗？也许是一次尝试，或者至少是什么事情？
我实际上是要创建 jsfiddle，接下来我知道 Borre 为此提供了解决方案。
请把他的回答标记为接受。 :) 有一个复选标记，您可以单击问题左侧。
其实我刚得到 15 分，所以现在我可以将答案标记为已接受（我做到了）。

标签： javascript jquery html

【解决方案1】：

您可以使用此代码：

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

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

【讨论】：

天啊！这正是我一直在寻找的。你太棒了博尔。您创建 jsfiddle 的事实甚至很棒。太快了。

【解决方案2】：

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

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';

【讨论】：

【解决方案3】：

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

Element.scrollTop - MDN

Element.scrollTop - W3 school

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

【讨论】：