13

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

6 Answers 6

19

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;
}
1
  • Slightly cleaner: var list = $("#mylist"); $('.add').click(function(){ list.append("<li>Test</li>").animate({scrollTop: list.prop("scrollHeight")}, 500); }); Feb 19, 2018 at 23:20
11

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>

0
4

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/

3

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>

0
0

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>

-1

There is one simple way to do this:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.