JQuery：将元素滚动到视口

Question

我想做与“Scroll to”相反的操作：即，不是滚动到div，而是希望div滚动到我。 “我”是以下行的一个（Twitter的引导row）：

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

见，当我点击左下角行，视滚动到内容DIV之一。我想要相反的：我想要这个div（在飞行中创建一个twitter引导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的“top”属性时发生了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); 
    }); 
});