如何使用jquery滚动到第n个子项

Question

你好，使用Jquery，我如何将一个元素(使用overflow(滚动到children元素？

<span id="gran">
<span id="parent">
<div class="a">
Casa
</div>
<div class="a">
Casa
</div>
<div class="a">
Casa
</div>
<div class="a">
Casa
</div>
<div class="a">
Casa
</div>
</span>
</span>
#gran {
overflow: auto;
}

我想滚动#gran到a类的第三个元素，所以我尝试了这个，但不起作用：

$("#gran").scrollTo('#parent > div:nth-child(3)'); 

我希望得到你的帮助：(非常感谢，很抱歉我的英语

Answer 1

就是这样做的

• 您需要将max-height设置为overflow : auto，以使元素可以滚动，而不必在没有滚动条的情况下继续扩展。。如果您需要使用文档/正文滚动条，请使用$('body , html')平滑滚动到div id jQuery

• 您需要将animate()函数与scrollTop和offset()/position()一起使用

//$("#gran").scrollTo('#parent > div:nth-child(3)');
$(document).ready(function(){
$('#gran').animate({
scrollTop: - $('#gran').offset().top + $("#parent > div:nth-child(3)").offset().top
}, 2000);
});

#to_remove{
background : red;
height : 100px;
}
#gran {
overflow: auto;
max-height : 500px;
}
.a{
height : 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="to_remove"></div>
<div id="gran">
<div id="parent">
<div class="a">
Casa 1
</div>
<div class="a">
Casa 2
</div>
<div class="a">
Casa 3
</div>
<div class="a">
Casa 4
</div>
<div class="a">
Casa 5
</div>
</div>
</div>