JQuery 将 li id 滚动到 div 的顶部

Question

我正在使用 JQuery 将选定的列表项滚动到溢出设置为滚动的 div 中的 View 中。以下代码工作正常，但它将选定的列表项滚动到屏幕顶部，而不是 #QuestionScroller div 的顶部。这使它在上面的内容下看不到了。我添加了 75px 偏移量，但这并不理想，因为上面内容的高度会根据视口(viewport)大小而变化。那么如何调整脚本以滚动到 #QuestionScroller div 的顶部而不是页面顶部？

$(window).load(function () {
    var contactTopPosition = $("#ListItemQuestion<%=Session["QuestionID"] %>").position().top - 75;
    $("#QuestionScroller").animate({ scrollTop: contactTopPosition },2500);
});

Answer 1

请参阅下面的代码。希望这对您有所帮助。

var container = $('#QuestionScroller'),
    scrollTo = $('#ListItemQuestion');
    container.animate({scrollTop: scrollTo.offset().top - container.offset().top + 
                       container.scrollTop()});

#QuestionScroller {
    width: 200px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QuestionScroller">
    <ul>
        <li id='row_1'>111111</li>
        <li id='row_2'>222222</li>
        <li id='row_3'>333333</li>
        <li id='ListItemQuestion'>444444</li>
        <li id='row_5'>555555</li>
        <li id='row_6'>666666</li>
        <li id='row_7'>777777</li>
        <li id='row_8'>888888</li>
        <li id='row_9'>999999</li>
    </ul>
</div>