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

Question

I have a ul defined like

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

In my javascript I add li items to this ul with jquery using

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

I want my ul to automatically scroll down the div to when I have added a lot of li items and ul surpass the height defined for it

Things I have tried:

1. In CSS I set a max-height and overflow-y:scroll for the ul
2. In Javascript I did $("mylist li").last().focus();

Answer 1

Click this JS fiddle . It will help you.

Jquery:

$('.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;
}

Answer 2

I have used jQuery animate to function smooth scrolling. Im just adding few elements to the ul and then scrolling to the last li element under ul .

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

HTML Code:

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

Live Demo @ JSFiddle : http://jsfiddle.net/dreamweiver/0Lofm4mL/1/

Answer 3

This can be done also in Vanilla JS no need for JQuery:

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

See also snippet below:

 //this adds the new element at the bottom button = document.querySelector("button") button.onclick = function() { list = document.querySelector("#mylist"); var li = document.createElement("li"); li.textContent = "Added with Vanilla JS" list.appendChild(li); //this jumps to the last element on the bottom items = document.querySelectorAll(".dummy"); console.log(items); last = items[items.length-1]; last.scrollIntoView(); } 

 #mylist { max-height: 200px; overflow-y: auto; } .dummy { min-height: 80px; background-color: lightgrey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button>Add</button> <div> <ul id="mylist"> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> </ul> </div> 

Answer 4

Try something like

 $('button').click(function() { var $last = $("<li>Test</li>").appendTo("#mylist"); $("#mylist").stop().animate({ scrollTop: $last.offset().top }, '500', 'swing', function() {}); }) 

 #mylist { max-height: 200px; overflow-y: auto; } .dummy { min-height: 80px; background-color: lightgrey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button>Add</button> <div> <ul id="mylist"> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> <li class="dummy">Test</li> </ul> </div> 

Answer 5

A much simpler answer is the following:

 function setItem(){ // We go through all items and change the value of the id attribute to empty $('#mylist li').each(function (i, v) { $(v).attr('id', ''); }); // We add the items $('#mylist').append('<li id="last">test</li>'); // Currently there is only one identifier called "last" window.location.href = '#last'; } 

 #mylist{ overflow-y: scroll; height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="setItem();">Add</button> <div id="mylist"></div> 

Answer 6

There is one simple way to do this:

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