Javascript 查找并滚动到元素

大家好大家好！ 我正在编写一个基于bootstrap3的电路板。有一个数据库充满了声音信息，我正在从中创建div。我想添加一个搜索栏，在页面中查找元素并滚动到它。 我已经看过jquery.scrollTo或javascript，但我找不到如何做

这是我想使用的搜索表单：

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

提交

这是尸体的样子：

  echo "<div id='EPsound".$j."' name='".$name[$j]."' class='col-md-6'></br>"; //créer une div pchq son
            echo "<div class='sound center-block'>";
                echo "<img src=".$artwork[$j]." class='img-thumbnail center-block' />";
                echo "<span>$name[$j]</span>";
                echo "<i class='fa fa-play fa-3x play' onclick='$onclickplay'></i>";
                echo "<i class='fa fa-plus fa-3x plus' onclick='$onclickqueue'></i>";
            echo "</div>";
  echo "</div>";

echo“
”//警察公共关系科
回声“；
回声“；
回显“$name[$j]”；
回声“；
回声“；
回声“；
回声“；

非常感谢您的帮助

//获取包含名称的所有结果
// Grab all the result containing the name
var list = $('.sound span'); // you should add a better scope

// Whenever user type in the input field...
$('.navbar-form input').on('keyup', function (e) {
   var regex = new RegExp(e.currentTarget.value, 'ig');

   // ...try to find if any element is matching typed text
   for (var i = 0, len = list.length; i < len; i += 1) {
     list[i].name.toLowerCase().match(regex) && list[i].scrollIntoView();
     break; // stop when found
   }
});

变量列表=$（'.sound span'）；//您应该添加一个更好的范围
//每当用户在输入字段中键入。。。
$（'.navbar form input'）。在（'keyup'，函数（e）上{
var regex=新的RegExp（e.currentTarget.value，'ig'）；
//…尝试查找是否有任何元素与键入的文本匹配
对于（变量i=0，len=list.length；i

JavaScript:

如果您正在寻找纯JavaScript解决方案，可以使用

scrollIntoView()

方法

要使用它，您需要应用它的“元素”。因此，您可以这样应用它：

document.getElementById("elementID").scrollIntoView();

您可以在这里查看：

这些方法只是使上述元素立即聚焦。所以从用户的角度来看，整体效果并不是那么好

JQuery：

如果您希望平滑滚动到上述元素，可以使用Jquery的ScrollTop功能：

您可以这样使用它：

$("#btnScroll").click(function() {
    $("html, body").animate({ scrollTop: $("#block2").offset().top }, 500);    
});

您可以在这里查看：

---

希望这有帮助

用户将输入名称？是！像“Jeff Beck”，然后点击搜索按钮，它将滚动到相应的div！我想你应该看看这个问题：谢谢！我如何实现它？我发现了这个：但是我在实现它时遇到了麻烦！我补充了一些意见