在数据表中垂直滚动动画答案

【问题标题】：Animate scroll vertical in datatables在数据表中垂直滚动动画
【发布时间】：2017-02-14 08:02:02
【问题描述】：

我想使用数据表显示所有数据。但我希望这些数据每 3 秒自动（动画）滚动每一行

这是我的代码，这是我的jsfiddle

我想在大屏幕上显示数据。

<html>
<head>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
      <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
      <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
      <script type="text/javascript" src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
      <script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
      <style type="text/css">
        table th:nth-child(3), td:nth-child(3) {
        display: none;
        }
      </style>
      <title>jQuery Datatables responsive example</title>
      <script type='text/javascript'>
        $(window).load(function(){
            $(document).ready(function() {
            $('#example').DataTable({
            "scrollX": true,
            "animate": true,
            "bLengthChange": false,
            "bFilter": false,
            "bInfo" : false,
            "paging":   false
            });
            });
        });
    </script>
</head>
<body>
  <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

帮帮我，谢谢

【问题讨论】：

标签： javascript jquery html css datatables

【解决方案1】：

您可以像这样使用delay()：

$(document).ready(function() {
    $('#example').DataTable({
        "scrollX": true,
        "animate": true,
        "bLengthChange": false,
        "bFilter": false,
        "bInfo" : false,
        "paging":   false
    });

    $('#example > tbody  > tr').each(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 200).delay(2800);        
    });

} );

fiddle

【讨论】：

啊，谢谢兄弟。这是工作，但当最后一个数据。这可以滚动到顶部并再次滚动吗？
这可以滚动到顶部并再次滚动吗？