如何动态滚动焦点特定突出显示的div

时间:2017-07-11 06:53:52

标签: jquery html css

如何动态滚动以聚焦特定突出显示的div?我试图滚动聚焦一个特定的div突出了类。我怎么能解决这个问题?

<div class="row">
<p>123</p>
</div>
<div class="row">
<p>123</p>
</div>
<div class="row">
<p>123</p>
</div>
<div class="row">
<p>123</p>
</div>
<div class="row highlighted">
<p>123</p>
</div>
<div class="row">
<p>123</p>
</div>

2 个答案:

答案 0 :(得分:3)

简单的js:

document.getElementsByClassName("row highlighted")[0].scrollIntoView();

或在jquery中:

$( ".row highlighted")[0].scrollIntoView();

答案 1 :(得分:1)

尝试使用jquery position().top

&#13;
&#13;
$(document).on('click','button',function(){
var s  = $('.highlighted').position().top;
$('body').scrollTop(s)
})
&#13;
.row{
padding:50px;
border:1px solid red;
}
.highlighted{
border:2px solid green;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>scroll highlighted</button>
<div class="row">
<p>123</p>
</div>
<div class="row">
<p>123</p>
</div>
<div class="row">
<p>123</p>
</div>
<div class="row">
<p>123</p>
</div>
<div class="row highlighted">
<p>123</p>
</div>
<div class="row">
<p>123</p>
</div>
&#13;
&#13;
&#13;