JQuery：将元素滚动到视口中

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

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

请参阅，当我单击左下方的一行时，视口会滚动到内容div。 我想要相反的：我想要这个div（一个即时创建的twitter bootstrap col-nn ，而不是在它自己的高容器内语义上“滑动”）滚动到位。

因此，在点击时， row必须以某种方式检测到div不在视线范围内。 这似乎是可能的; 但是移动的div部分怎么样？

 
 
 
 
 
 
 
Row title
 
 
 
 
 
row
 
 
 
row
 
 
 
row
 
 
 
row
 
 
 
row
 
  
 
 
  
 
THIS IS THE 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); }); });