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

Question

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

重复单击 "add rows" link。添加行后通常需要几秒钟才能滚动到页面底部，有时它会立即滚动。

我不知道是不是 jquery 的 animate 有时会立即滚动而不是持续一段时间，或者有时浏览器可能会立即滚动到底部？这种行为似乎在 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 以停止当前的运行动画并开始新的动画。

我的片段：

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

body {
  padding: 100px;
}

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

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

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table>
</table>

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

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

Bugs appending rows to table and scrolling to bottom of page

html

javascript

jquery

jquery-animate