Question

您好大家好！我正在编写一个基于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>";

非常感谢非常感谢您的帮助！

Answer 1

// 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
   }
});

Answer 2

JavaScript的：

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

scrollIntoView()

方法

要使用它，您需要要应用它的'元素'。因此，您可以这样申请：

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

您可以在此处查看：http://jsfiddle.net/yYq39/1/

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

JQuery的：

如果您正在寻找到所述元素的平滑滚动，您可以使用Jquery的ScrollTop函数：

您可以这样使用它：

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

您可以在此处查看：http://jsfiddle.net/3ak6L/

希望这有帮助!!!

查找并滚动到元素

2 个答案: