数据表在页面更改时滚动到顶部

Question

我有个问题。使用datatables时，我想在页面更改时滚动表格顶部。

我添加了以下代码

$('#tableId').on( 'page.dt', function () {
    $('html, body').animate({
        scrollTop: 0
    }, 200);        
});

（目前它滚动到页面顶部）但它并不能完全工作。

当我单击其他页面时，页面会滚动到顶部，但在加载数据后，它会再次向下滚动。我不知道发生了什么（我不是 JavaScript 专家），但似乎 Datatables 在加载数据后运行额外的操作，再次滚动到底部。有什么方法可以防止数据表（可能）在加载数据后向下滚动？

我可以使用draw.dt代替page.dt，它会工作得很好，但会引起其他副作用。如果表格放置在页面上的某个位置，则在加载数据后，它将滚动到页面顶部（或表格顶部），我想仅在更改页面后运行此操作。

Answer 1

我想通了，但花了我很多时间。问题是当我使用 Bootstrapped 版本时：

<script type="text/javascript" src="https://cdn.datatables.net/t/bs/jq-2.2.0,dt-1.10.11/datatables.min.js"></script

当我把它改成：

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js"></script>

工作正常。

所以最后我注意到我可以像这样包含它（数据表和引导插件在单独的文件中）：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>

问题出在最后一个文件中（这里不是缩小版本 - https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js）。在这个文件中有一行：

$(host).find( '[data-dt-idx='+activeEl+']' ).focus();

这条确切的行导致当我在加载数据后单击按钮更改页面时，焦点再次移至页面底部。当我在本地使用这个文件并评论这一行时，现在当我使用：

$('#tableId').on( 'page.dt', function () {
    $('html, body').animate({
        scrollTop: 0
    }, 200);        
});

我被移到页面顶部，当我使用时；

$('#tableId').on( 'page.dt', function () {
    $('html, body').animate({
        scrollTop: $('#tableId').offset().top
    }, 200);        
});

我被移到了桌子的顶部。