How to keep the element scroll always at the bottom

Question

Consider the following example I’ve done here:

$("#add").click(function() {
    $("#wrap ul").append('<li class="new">Teste</li>');
    $("li.new").slideDown('slow', 'easeOutBounce');
});

http://jsfiddle.net/Wagner/4FQCK/5

As you can see by clicking the button add jQuery creates a new element li on my list.. So far so good.. Note that I have defined a max-height and a overflow: auto in my element wrap. The problem is that by adding multiple elements within my list, the scroll bar of wrap is in the middle of it, rather than staying in the bottom how I’d like. So my question is this, how would I make it so that when a new element is added the scroll bar does not go up (remembering that the user should still have the option to scroll the bar up if he wants to see other items in the list).

Answer 1

You can use it like this to scrol:

    $('#wrap').animate({                   // unsando o jQuery animate para animar o scroll
        scrollTop: $('#wrap ul').height()  // fazer scroll para a posição correspondente à altura do 'ul', o que é o mesmo que dizer scroll até ao fundo
    }, 500);                               // velocidade do scroll em milisegundos

Example

So inside the code where you add a new element you can also have the code that I added on top to animate a scroll. The final code will be:

$(function () {
    $("#add").click(function () {
        var wrapUl = $("#wrap ul");
        wrapUl.append('<li class="new">Teste</li>');
        // aqui poderia usar o ':last' para evitar aplicar o slideDown a todos os elementos
        // $("li.new:last").slideDown('slow', 'easeOutBounce'); 
        $("li.new").slideDown('slow', 'easeOutBounce');                                      
        $('#wrap').animate({
            scrollTop: wrapUl.height()
        }, 500);
    });
});

Answer 2

$(function() {
    $("#add").click(function() {
        $("#wrap ul").append('<li class="new">Teste</li>');
        $("li.new").slideDown('slow', 'easeOutBounce');
        $("#wrap").animate({scrollTop: $('#wrap').prop("scrollHeight")}, 500);
    });
});

jsfiddle

Reference: Append content to div and scroll/Animate to bottom

I found the answer on SOEN, and I adapted it to your case, so it would be nice to go out there and upvote the guy, and give the guy the credit!

EDIT: Seeing in the jQuery documentation, it seems that it also supports effects such as the "easeOutBounce" that you used: documentation of the Nemesis

Answer 3

this line of code helped me a lot because I tried to keep the scroll at the end of the various ways but it wasn’t working out! vlw!

$("#wrap").animate({scrollTop: $('#wrap').prop("scrollHeight")}, 500);