我正在使用 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);
});
最佳答案
请参阅下面的代码。希望这对您有帮助。
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>
关于JQuery 滚动 li id 到 div 顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34068396/