Question

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

Answer 2

你可以这样做 404
可以吗？

JQuery滚动li id到div的顶部

2 个答案: