JQuery：将元素滚动到视口中

Question

我想做与“Scroll to”相反的操作：也就是说，我希望 div 滚动到我，而不是滚动到一个 div。 “我”是以下行之一（twitter bootstrap row）：

+-------------+-----------+   +-------------+-----------+ 
+-------------+           |   +-------------+           |
+---click-----+   div     |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+-----------+   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+-----------+
+-------------+           |   +-------------+           |
+-------------+           |   +---click-----+    div    |
+-------------+           |   +-------------+           |
+-------------+           |   +-------------+           |
+-------------+-----------+   +-------------+-----------+

看，当我点击左下角的一行时，视口会滚动到内容 div。我想要相反：我想要这个 div（一个 twitter bootstrap col-nn 即时创建，而不是 可以 在其自己的高容器中语义“滑动”）滚动到位。

所以row 必须在点击时以某种方式检测到div 不在视线范围内。这seems 可能；但是移动的 div 部分呢？

<div class="row">
  <div class="col col-lg-12 col-sm-12">
    <div class="col-md-8">
      <table class="table">
        <thead>
          <tr>
            <th>Row title</th>
          </tr>
        </thead>
        <tbody>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>

          <tr class="my_row">
            <td>row</td>
          </tr>
<!-- a lot of other rows -->        
        </tbody>
      </table>
    </div> <!-- col-md-8 -->

    <div id="details" class="col-md-4 details">
      <div>THIS IS THE DIV</div>
    </div> <!-- col-md-4 -->

  </div> <!-- col-sm-12 -->
</div>

Answer 1

我构建了这个jsFiddle 来说明你如何实现你所说的东西，也就是说，如果我正确理解你想要什么。我使用 CSS3 过渡来促进实际动画，因为更改 DIV 的“顶部”属性时的 0 毫秒超时而触发。在我提供的示例中，我将DIV 的顶部与单击的行的顶部对齐。显然，您可以根据需要将其更改为浮动在中心（通过做一些数学运算）。

希望它为您指明正确的方向！

HTML

根据您的问题提供...

CSS

#details {
    transition: top 0.2s ease-in-out;
}

JavaScript

$(document).ready(function () {
    $("#details").css("top", $(".my_row:first").offset().top);
    $(".my_row").click(function () {
        var row = $(this);
        setTimeout(function () {
            $("#details").css("top", row.offset().top);
        }, 0);
    });
});