Anoimate function only works in Chrome

Asked

Viewed 32 times

0

Hello!

I’m playing a little game with javascript, where the program gives the player a certain amount of time to write a sentence, counts the letters, words and presents the results on a scoreboard. I added a scroll effect for when I finish each round, the page scroll to the scoreboard, but my code only works on Chrome. Does anyone have any idea how to reverse this?

This is my 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>

This is my javascript with the scoreboard functions:

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);
}
javascript jquery jquery-animate

1 answer

1


I also had the same problem and from what I saw, in some browsers the scrollbar is in html, so just change the code as the below:

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

Browser other questions tagged javascript jquery jquery-animate

You are not signed in. Login or sign up in order to post.