JQuery 将 li id 滚动到 div 的顶部答案

【问题标题】：JQuery scroll li id to top of divJQuery 将 li id 滚动到 div 的顶部
【发布时间】：2015-12-03 14:19:21
【问题描述】：

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

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

【问题讨论】：

标签： jquery html

【解决方案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>

【讨论】：

【解决方案2】：

你可以这样做
$("body").animate({scrollTop:$(“##QuestionScroller”).offset().top},2500)
可以吗？

【讨论】：

我认为这会将 div #QuestionScroller 滚动到顶部，但我需要将列表项 ID #ListItemQuestion 滚动到 div #QuestionScroller 的顶部。上面我的 OP 中的代码可以很好地将列表项滚动到页面顶部 -75，但我需要滚动到 div #QuestionScroller 的顶部。