Javascript 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
                });
            }
        }
});

注意

展开行-只需单击

单击

超链接。它将显示行详细信息

---

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

---

谢谢

您应该使用

offsetTop

属性来获取相关的

offsetParent

（请参见编辑部分）：

或设置

表格
元件位置非静态：

table.dataTable{position:relative；}


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

这是因为位置是根据
offsetParent
计算的。就规格而言，offsetParent是最近的祖先，其计算位置不是静态的，或者是
主体
元素或
td、th
或
表
（）

我怀疑，这种行为可能会在浏览器实现方面返回不同的结果，不管是否遵循规范

因此，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;
    });
}

正如您所看到的，对于任何类型的元素都不会发生元素异常（
docElem
是当前文档对象）。
默认情况下，
table
元素位置是静态的，这就是为什么在您的示例中，jq返回为
offsetParent
，jQuery datatable插件使用的
div
包装，而不是
table
（规范后面的异常）。因此，native
offsetTop
属性和jq
$.fn.position（）.top
返回不同的结果

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

在chrome上测试它（仅限），我无法复制问题。
您所说的“扩展行”是什么意思？@最后面的只需选中fiddle并单击
单击
链接，而且如果您可以检查，它不会滚动到每行的顶部。如果我展开一行，然后尝试展开上面的行。它无法到达顶部，因为
position（）
jQuery方法是相对于偏移父对象的，这里是
#示例
DIV，当您想要它相对于父对象的位置时，
表
。关于这个问题，我现在没有足够的时间来深入了解，对不起。也许以后吧。作为sdie的提示，修复你的小提琴，让桌子成为偏移的父母：谢谢顶级大师@a.Wolff。我从你身上学到了很多东西。我会在最后尝试解决这个问题，并发布答案。如果你也有时间，请张贴你的答案，以及刚刚检查过的文件的抵销，并应返回相同的结果作为jq位置方法有关抵销的家长，所以我在这里感到困惑。这需要更多的调查。德国劳埃德船级社
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;
    });
}