如何將列表框中的選定項目滾動到頂部？

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