How to make scrollbar go down when adding new LI elements

Question

I'm having issues when I'm creating dynamic LI.

They're added, but the scrollbar goes up, instead of down. See image bellow enter image description here

I'm adding all content with javascript. So i'm not sure what do add for making the scrollbar go down. Any idea?

This is the demo: http://jsbin.com/qonuy/1/

$('#btPre').click(function(e) {
    var list = $('#myTab');
    var listActive = $('#myTab .active');
    addNewElement(list,listActive);
});

var addNewElement = function addNewElement(list,listActive){
    var psize= list.find('li');
    listActive.removeClass('active');
    psize = psize.size()-1;
    var newLi='<li class="active" id='+psize+'>';
    newLi=newLi+'<a href="#tab_preview" data-toggle="pill">';
    newLi=newLi+'<span  class="display edit_text">Card '+psize+'</span>';
    newLi=newLi+'<input type="text" class="edit" style="display:none"/></a></li>';
    list.append(newLi);
    $('#myTab a[href="#tab_preview"]').tab('show');
};

have a look at this - essentially you want to scroll to a position in your div after adding an element - or scroll your div to the position of your last element http://stackoverflow.com/questions/2346011/jquery-scroll-to-an-element-within-an-overflowed-div — Darren Wainwright, Aug 12 '14 at 22:07

score 4 · Accepted Answer · answered Aug 12 '14 at 22:11

4

Insert the following to the bottom of your addNewElement function. Worked in the jsBin, anyway.

$("#myTab").scrollTop($("#myTab")[0].scrollHeight);

answered Aug 12 '14 at 22:11

J148

576
1
4
17

Your answer is right....here is the same test: http://jsfiddle.net/robertrozas/m5Le101z/ – Hackerman Aug 12 '14 at 22:15

How to make scrollbar go down when adding new LI elements

1 Answers1