jquery无卡顿向上滚动实现代码

以下是一个简单的 jQuery 实现向上滚动的代码示例：

HTML 代码：

<div id="scroll-container">
  <ul>
    <li>第一条消息</li>
    <li>第二条消息</li>
    <li>第三条消息</li>
    <li>第四条消息</li>
    <li>第五条消息</li>
  </ul>
</div>

CSS 代码：

#scroll-container {
  height: 200px;
  overflow: hidden;
}

#scroll-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#scroll-container ul li {
  margin: 10px 0;
}

JavaScript 代码：

$(document).ready(function() {
  var containerHeight = $('#scroll-container').height();
  var itemHeight = $('#scroll-container ul li').outerHeight();
  var items = $('#scroll-container ul li').clone();

  $('#scroll-container ul').append(items);

  setInterval(function() {
    var scrollTop = $('#scroll-container').scrollTop();

    if (scrollTop + containerHeight >= itemHeight * items.length) {
      $('#scroll-container').scrollTop(0);
    } else {
      $('#scroll-container').scrollTop(scrollTop + itemHeight);
    }
  }, 2000);
});

代码解释：

1. 首先获取容器 `#scroll-container` 的高度和列表项 `li` 的高度。
2. 复制列表项，添加到列表的末尾，以实现无限循环滚动。
3. 使用 `setInterval` 函数每隔 2 秒钟执行一次滚动操作。
4. 获取当前滚动位置 `scrollTop`，如果已经滚动到最后一条消息，将滚动位置重置为 0，否则将滚动位置加上一个列表项的高度，实现向上滚动的效果。