Question

I’m trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.

Please see the fiddle here

If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).

I’m pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.

Answer 1

I’ve reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:

$(document).ready(function() {
    var list = $("#q-d-list");

    $(document).on('click', '#add', function() {
        $('.active', list).removeClass("active");

        var count = list.children().length + 1;
        var active = $('<div />', {
            'data-qid': count,
            'class': 'mli active'
        }).text('q' + count).appendTo(list);

        list.scrollTop(list[0].scrollHeight);
    });
});​

Demo: http://jsfiddle.net/MrvcB/19/