0

Olá!

Eu estou fazendo um joginho com javascript, onde o programa dá um determinado tempo para o jogador escrever uma frase, contabiliza as letras, palavras e apresenta em um placar os resultados em um placar. Eu acrescentei um efeito de scroll para quando eu finalizar cada rodada, a página scrollar até o placar, mas meu código só funciona no chrome. Alguém tem alguma ideia de como reverter isso?

Esse é meu html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <div class="container">



 <h1 class="center">Alura Typer</h1>


<p class="frase">Lorem ipsum dolor sit amet, consectetur adipiscing 
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <ul class="informacoes center">
        <li>
            <i class="small material-icons icones">description</i>
            <span id="tamanho-frase">19</span> palavras
        </li>
        <li>
            <i class="small material-icons icones">query_builder</i>
            <span id="tempo-digitacao">3</span> segundos
        </li>
    </ul>

    <textarea class="campo-digitacao" rows="8" cols ="40"></textarea>

    <div class="botoes">
        <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
            <i class="material-icons">restore</i>
        </a>
        <a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
            <i class="material-icons">assignment</i>
        </a>
    </div>

    <ul class="center">
        <li><span id="contador-caracteres">0</span> caracteres</li>
        <li><span id="contador-palavras">0</span> palavras</li>
    </ul>
    <section class="placar">
        <h3 class="center">Placar</h3>
        <table class="centered bordered">
            <thead>
                <th>Usuário</th>
                <th>N° de palavras</th>
                <th>Remover</th>
            </thead>
            <tbody>
                <tr>
                    <td>usuário1</td>
                    <td>99</td>
                    <td>
                        <a href="#" class="botao-remover">
                            <i class="small material-icons">delete</i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>
</div>

<script src="js/jquery.js"></script>
<script src="js/placar.js"></script>
<script src="js/main.js"></script>

Esse é o meu javascript com as funções referentes ao placar:

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

    var linha = novaLinha(usuario,numPalavras);

    linha.find(".botao-remover").click(removeLinha);

    corpoTabela.prepend(linha);

    $(".placar").slideDown(500);
    scrollPlacar();
}

function novaLinha(usuario, palavras) {
    var linha = $("<tr>");
    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(palavras);
    var link = $("<a>").attr("href","#").addClass("botao-remover");
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");
    var colunaRemover = $("<td>");

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

    return linha;
}

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

    linha.fadeOut(1000);
    setTimeout(function(){
       linha.remove;
    },1000);

}

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

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

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

1 Resposta 1

1

Eu tambem tive o mesmo problema e pelo que vi, em alguns navegadores o scrollBar fica no html, então é só você alterar o código como o abaixo:

$("html,body").animate({
     scrollTop: posicaoPlacar + "px"
}, 1000);

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 .