javascript - 如何向下滚动到动态添加的 ul 中的最后一个 li 项？

Question

我定义了一个 ul

 <div>
   <ul id="mylist">
   </ul>
 </div>

在我的 javascript 中，我使用 jquery 将 li 元素添加到此 ul

$("mylist").append("<li>Test</li>");

我希望我的 ul 在我添加了很多 li 元素并且 ul 超过为其定义的高度时自动向下滚动 div

我尝试过的事情:

1. 在 CSS 中，我为 ul 设置了 max-height 和 overflow-y:scroll
2. 在 Javascript 中我做了 $("mylist li").last().focus();

Answer 1

点击这个JS fiddle .它会帮助你。

J查询:

$('.add').click(function(){
   $("#mylist").append("<li>Test</li>");
   $('#mylist').animate({scrollTop: $('#mylist').prop("scrollHeight")}, 500);
});

HTML:

<div>
  <ul id="mylist"></ul>
  <button class="add">Add li</button>
</div>

CSS:

#mylist {
    width: 100px;
    height: 200px;
    padding: 20px;
    background-color: #eeeeee;
    overflow-y: auto;
}