jQuery滚动li id顶部div

我正在使用JQuery将选定的列表项滚动到div中的溢出设置为视图。下面的代码工作正常，但它将选定的列表项目滚动到屏幕的顶部，而不是#QuestionScroller div的顶部。这使得它在上面的内容中不可见。我添加了75px偏移量，但这并不理想，因为上述内容的高度可能因视口大小而异。那么如何让脚本适应滚动到顶部#QuestionScroller div不是页面顶部？jQuery滚动li id顶部div

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

来源

2015-12-03 IainB

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

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>

来源

2015-12-03 18:42:33 Azim

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

来源

2015-12-03 14:24:29 yaochiqkl

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

jQuery滚动li id顶部div

回答

相关问题