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

我有一个类似的

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

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

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

$（“mylist”）。追加（
测试“/li>”；

我希望我的ul自动向下滚动div到，当我添加了很多li项目，ul超过为其定义的高度时

我尝试过的事情：

在CSS中，我为ul设置了一个最大高度和overflow-y:scroll

在Javascript中，我做了$（“mylist li”）.last（）.focus（） 试试像这样的东西

$（“按钮”）。单击（函数（）{
var$last=$（“
测试”
”）。附录（“#mylist”）；
$（“#mylist”）.stop（）.animate({
scrollTop:$last.offset（）.top
}，'500'，'swing'，function（）{}）；
})

#我的列表{
最大高度：200px；
溢出y：自动；
}
.笨蛋{
最小高度：80px；
背景颜色：浅灰色；
}

添加

试验
试验
试验
试验
试验

我使用jQuery

动画来实现平滑滚动。我只是在
ul
中添加了几个元素，然后滚动到
ul
下的最后一个
li
元素

JSCode:

$(function () {
  $("#mylist").append("<li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li>");
  $('div').animate({
    scrollTop: $("#mylist li").last().offset().top
  },
    'slow');
});

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

$（函数（）{
$（“#mylist”）。追加（“
测试
测试
测试
测试
”；
$（'div'）。设置动画({
滚动条：$（“#mylist li”）.last（）.offset（）.top
},
“慢”）；
});

HTML代码：

$(function () {
  $("#mylist").append("<li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li>");
  $('div').animate({
    scrollTop: $("#mylist li").last().offset().top
  },
    'slow');
});

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




现场演示@JSFiddle:
单击此按钮。它会帮助你的

$(function () {
  $("#mylist").append("<li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li>");
  $('div').animate({
    scrollTop: $("#mylist li").last().offset().top
  },
    'slow');
});

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

Jquery：

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

这也可以在Vanilla JS中完成，无需JQuery：

items = document.querySelectorAll(".dummy");
    last = items[items.length-1];
    last.scrollIntoView();

另请参见下面的代码段：


//这将在底部添加新元素
按钮=文档。查询选择器（“按钮”）
button.onclick=函数（）{
列表=document.querySelector（#mylist”）；
var li=document.createElement（“li”）；
li.textContent=“添加香草JS”
表1.儿童（李）；
//这将跳到底部的最后一个元素
items=document.queryselectoral（“.dummy”）；
控制台日志（项目）；
最后=项目[项目长度-1]；
last.scrollIntoView（）；
}
#我的列表{
最大高度：200px；
溢出y：自动；
}
.笨蛋{
最小高度：80px；
背景颜色：浅灰色；
}

添加

试验
试验
试验
试验
试验

一个更简单的答案如下：


函数setItem（）{
//我们遍历所有项并将id属性的值更改为空
$（'#mylist li'）。每个（函数（i，v）{
$（v）.attr（'id'，''）；
});
//我们添加项目
$（“#mylist”）.append（“
test
”）；
//目前只有一个称为“last”的标识符
window.location.href='#last'；
}
#我的列表{
溢出y：滚动；
高度：100px；
}

添加
有一种简单的方法可以做到这一点：

container = $('MyElement').get(0);
container.scrollTop = (container.scrollHeight + container.offsetHeight);

你检查过这个吗？如果有助于稍微清理一下，请检查这个：
var list=$（“#mylist”）$（'.add'）。单击（函数（）{list.append（
Test
））。设置动画（{scrollTop:list.prop（“scrollHeight”）}，500；}）