Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Scroll sem funcionar

Pessoal, toda vez que adiciono uma linha ao placar ele não realiza o scroll, esse foi o código que fiz.

$("#botao-placar").click(mostraPlacar);

function inserePlacar() {
    let corpoTabela = $(".placar").find("tbody");
    let usuario = "Edilson";
    let numPalavras = $("#contador-palavras").text();

    var linha = novaLinha(usuario, numPalavras);
    linha.find(".botao-remover").click(removeLinha);

    corpoTabela.append(linha);
    $(".placar").slideDown(500);
    scrollPlacar();
}

function mostraPlacar() {
    $(".placar").stop().slideToggle(600);
}

function scrollPlacar() {
    let posicaoPlacar = $(".placar").offset().top;
    $("html").animate(
    {
        scrollTop: `${posicaoPlacar} px`
    }, 1000);
}

function novaLinha(usuario, palavras) {
    let linha = $("<tr>");
    let colunaUsuario = $("<td>").text(usuario);
    let colunaPalavras = $("<td>").text(palavras);
    let colunaRemover = $("<td>");

    let link = $("<a>").addClass("botao-remover").attr("href", "#");
    let icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    link.append(icone);

    colunaRemover.append(link);

    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}

function removeLinha() {
    event.preventDefault();
    let linha = $(this).parent().parent();

    linha.fadeOut(1000);
    setTimeout(function() {
        linha.remove();
    }, 1000);
}
5 respostas
solução!

Fala aí Edilson, tudo bem? Acho que o problema está na sua função responsável por realizar o scroll, veja como ela está:

function scrollPlacar() {
    let posicaoPlacar = $(".placar").offset().top;
    $("html").animate({
        scrollTop: `${posicaoPlacar} px`
    }, 1000);
}

Vejo dois problemas, o primeiro é que o .animate deve ser chamado no body ao invés do html.

O segundo é referente ao valor do scrollTop, na sua template string possuí um espaço, dessa maneira vai ficar 10 px por exemplo, quando na verdade deveria ser 10px.

Tente concertá-la:

function scrollPlacar() {
    let posicaoPlacar = $(".placar").offset().top;
    $("body").animate({
        scrollTop: `${posicaoPlacar}px`
    }, 1000);
}

Espero ter ajudado.

Matheus, era o espaço na template string, e quando eu utilizei o body ao invés do html ele não funciona.

Sem problemas Edilson, o importante é que conseguiu resolver, continue usando o html então.

Talvez um detalhe ou outro possa estar diferente, por isso, a necessidade de usar o html ao invés do body (isso é indiferente também).

Abraços

Deve ser alguma questão de posicionamento do body, use o html que o resultado é o mesmo. (usei a tag html também). A questão do espaço na unidade de medida já foi corrigido, certo ?

Não esqueça de marcar o tópico como resolvido!

Eu também estava com o mesmo problema, mas quando mudei de "body" para "hmtl", funcionou tudo certinho.