11

Considerem o seguinte exemplo que fiz aqui:

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

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

Como podem reparar ao clicar no botão add o jQuery cria um novo elemento li na minha lista.. Até ai tudo certo.. Notem que eu defini um max-height e um overflow: auto no meu elemento wrap. O problema é que ao adicionar vários elementos dentro da minha lista, a barra de rolagem do wrap fica no meio dele, ao invés de se manter no bottom como eu gostaria.. Então minha dúvida é essa, como eu faria para que quando um novo elemento fosse adicionado a barra de rolagem não suba (lembrando que o usuário ainda deve ter a opção de rolar a barra para cima caso ele deseje ver outros itens da lista).

3 Respostas 3

8

Pode usar assim para fazer o 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

Exemplo

Assim dentro do código onde adiciona um novo elemento pode ter também o código que adicionei em cima para animar um scroll. O código final será:

$(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);
    });
});
6
$(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

Referência: Append content to div and scroll/animate to bottom

Achei a resposta no SOEN, e adaptei para o seu caso, então seria legal ir lá e dar um upvote pro cara, e dar o crétido!

EDIT: Vendo na documentação do jQuery, parece que ele suporta também efeitos, como o "easeOutBounce" que você usou: documentação do animate

2
  • Poxa, eu usei o fiddle original da questão para ir testando, e depois na hora de fazer o meu, esqueci de adicionar as bibliotecas sendo usadas... que mancada! Valeu @Sergio por sua observação! Commented 23/02/2014 às 20:20
  • 1
    Isso foi uma coisa que me ocorreu... ia tentar ver se tinha como fazer usando uma ancora ao final de todos os UL's. E acabou ficando ai sem querer. Commented 23/02/2014 às 21:03
1

esse linha de código me ajudou muito, pois eu tentei manter a scroll no fim da de varias formas mas não estava dando certo! vlw!

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .