Question

我想反对＆＃34; Scroll to＆＃34; ：也就是说，我不想滚动到div，而是希望div滚动到我。＆＃34; ME＆＃34;是以下行之一（twitter bootstrap row）：

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

当我点击左下方的一行时，视口会滚动到内容div。我想要反过来说：我想要这个div（在运行中创建一个twitter引导程序col-nn，而不是可以在语言上＆＃34;滑动＆＃34;在它自己的高容器内）滚动到的地方。

因此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的“顶部”属性时超时0ms而触发。在我提供的示例中，我将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);
    });
});

JQuery：将元素滚动到视口中

1 个答案: