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

【问题标题】：How to dynamically scroll focus a particular highlighted div如何动态滚动焦点特定突出显示的div
【发布时间】：2017-07-11 06:53:52
【问题描述】：

如何动态滚动以聚焦特定突出显示的 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>

【问题讨论】：

标签： jquery html css

【解决方案1】：

在简单的js中：

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

或在 jquery 中：

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

【讨论】：

document.getElementsByClassName("行高亮").scrollIntoView();它显示错误不是函数
是的，很抱歉它返回一个集合，因为您可以有多个具有相同 id 的元素，我添加了一个 [0] 以仅选择返回的第一个元素。
[0] 是什么意思？
getElementsByClassName 函数不返回单个元素，因为多个元素可以具有相同的类（与 id 不同）。所以它返回一个集合（排序数组）[0]是选择数组的第一个元素。

【解决方案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>

【讨论】：

【解决方案3】：

你确实可以使用：

element.scrollIntoView();

小心：如果您使用的是 VueJs，则尝试使用 Refs 时可能会遇到问题。即使在 VueJs 中，您也应该使用 document.getElementById。

【讨论】：

【解决方案4】：

使用 jQuery scrollIntoView:

$(".ClssName").scrollIntoView();

【讨论】：

您的回答应该为问题添加不同的解决方案。不幸的是，这与接受的答案完全相同。