scrollTop并不像预期的那样

注意

重新开启赏金，因为忘了上次奖励它。 已经被A.Woff大师回答了。

我希望在用户展开它时到达某一行（这样当最后一个可见行扩展时，用户不必向下滚动以查看内容）。

我用了，

$('#example tbody').on('click', 'td .green-expand', function (event, delegated) { var tr = $(this).closest('tr'); var row = table.row(tr); if (row.child.isShown()) { if (event.originalEvent || (delegated && !$(delegated).hasClass('show'))) { row.child.hide(); tr.removeClass('shown'); } } else { if (event.originalEvent || (delegated && $(delegated).hasClass('show'))) { row.child(format(row.data())).show(); tr.addClass('shown'); var parent = $(this).closest('table'); var scrollTo = $(this).closest('tr').position().top; $('.dataTables_scrollBody').animate({ scrollTop: scrollTo }); } } }); 

注意

展开行 – 只需单击click超链接即可。 它将显示行详细信息

具有展开行的数据表

Answer 1

您应该使用offsetTop属性来获取相关的offsetParent （ 请参阅编辑部分 ）：

 var scrollTo = tr.prop('offsetTop'); 

-jsFiddle-

或者将table元素位置设置为非静态：

table.dataTable { position: relative; }

-jsFiddle-

编辑：为什么jq position().top在这种情况下不起作用？

这是因为计算了关于offsetParent位置。 本地，关于spec，offsetParent是最近的祖先，其计算位置不是静态的，或者是body元素或td, th或table （ spec ）。

我怀疑，这种行为可以返回与浏览器实现不同的结果，遵循规范与否。

因此，jQuery对其进行规范化，不使用本机DOM属性offsetParent而是使用自己的方法$.fn.offsetParent() 。 该方法实现如下：

 offsetParent: function () { return this.map(function () { var offsetParent = this.offsetParent || docElem; while (offsetParent && (!jQuery.nodeName(offsetParent, "html") && jQuery.css(offsetParent, "position") === "static")) { offsetParent = offsetParent.offsetParent; } return offsetParent || docElem; }); } 

如您所见，没有关于任何类型的元素的任何元素exception（ docElem是当前文档对象）。 默认情况下， table元素位置是静态的，这就是为什么在你的例子中，jq返回为offsetParent ，jQuery datatable插件使用的div包装器而不是table （规范之后的exception）。 因此，native $.fn.position().top属性和jq $.fn.position().top返回不同的结果。

此外，当前的解决方案并不适用于所有情况

在chrome（仅）上测试它，我无法复制问题。

Answer 2

您需要获取屏幕高度并根据所需的像素大小调整扩展的div。 我们不能直接使用scrollTop选项来调整窗口中的位置。 这些必须动态调整，因为它取决于各种屏幕分辨率和大小。 看看你是否有更多问题。

谢谢！！