Question

此处编写代码并在下面重复：http://codepen.io/anon/pen/rLvBbA

重复点击“添加行”链接。

表示，通常在添加行后滚动到页面底部需要几秒钟的时间。

我不知道是不是jquery的动画有时会立即进行滚动而不是持续时间，或者有时候浏览器可能会立即滚动到底部？这种行为似乎在Chrome和Safari（不规则）上有所不同，在Firefox上有所不同（似乎可以在第一页加载但在此之后分解）。

HTML：

<table>
</table>

<a href="javascript:(addRows())">Add rows</a>

CSS：

body {
  padding: 100px;
}

td {
  padding: 10px 20px;
  border: 1px solid #ccc;
}

tr.level-WARN {
  background-color: #FFB347;
}

使用Javascript：

$(document).ready(function() {
  addRows();
  addRows();
  addRows();
  addRows();
});

function addRows() {
  for (var x = 0; x<5; x++) {
    var row = $('<tr/>');
    row.append($('<td/>').text('This is some table cell content.'));

    if (Math.floor(Math.random() * 10) == 0) {
      row.addClass('level-WARN');
    } else {
      row.addClass('level-INFO');
    }
    $('table').append(row);
  }

  $("html, body").animate({ scrollTop: $(document).height() }, 3000);
}

Answer 1

致电时：

addRows();

上一个动画无法完成，因此您可以添加jQuery stop以停止当前正在运行的动画并开始新动画。

我的片段：

＆＃13;

function addRows() {
  for (var x = 0; x<5; x++) {
    var row = $('<tr/>');
    row.append($('<td/>').text('This is some table cell content.'));

    if (Math.floor(Math.random() * 10) == 0) {
      row.addClass('level-WARN');
    } else {
      row.addClass('level-INFO');
    }
    $('table').append(row);
  }

  $("html, body").stop().animate({ scrollTop: $(document).height() }, 3000);
}
$(function () {
  addRows();
  addRows();
  addRows();
  addRows();
});

＆＃13;

body {
  padding: 100px;
}

td {
  padding: 10px 20px;
  border: 1px solid #ccc;
}

tr.level-WARN {
  background-color: #FFB347;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table>
</table>

<a href="javascript:(addRows())">Add rows</a>

＆＃13;

将行附加到表并滚动到页面底部的错误

1 个答案: