特定の強調表示されたdivにフォーカスを動的にスクロールする方法

Question

動的にスクロールして特定の強調表示されたdivにフォーカスする方法はありますか？特定のdivにフォーカスするためにスクロールしようとしていますclass highlighted.Howこれを解決する方法はありますか？シンプルなJSで

<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> 

Answer 1

：

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

やjqueryの中

：

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

Answer 2

jQueryを使って試してみてくださいposition().top

$(document).on('click','button',function(){ 
 
var s = $('.highlighted').position().top; 
 
$('body').scrollTop(s) 
 
})

.row{ 
 
padding:50px; 
 
border:1px solid red; 
 
} 
 
.highlighted{ 
 
border:2px solid green; 
 
}

<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>