Question

我正在用javascript进行游戏，程序为玩家提供了写句子的时间，计算字母，单词并在记分牌上显示结果。我有一个滚动效果，当我完成每一轮，向下滚动页面到记分板，但我的代码只适用于chrome。有没有人知道如何扭转这种局面？

这是我的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/styles.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="info center">
            <li>
                <i class="small material-icons icones">description</i>
                <span id="quote-size">19</span> words
            </li>
            <li>
                <i class="small material-icons icones">query_builder</i>
                <span id="typing-time">3</span> seconds
            </li>
        </ul>

        <textarea class="typing-field" rows="8" cols ="40"></textarea>

        <div class="buttons">
            <a id="button-restart" class="btn-floating btn-large waves-effect waves-light red">
                <i class="material-icons">restore</i>
            </a>
            <a id="button-scoreboard" class="btn-floating btn-large waves-effect waves-light green">
                <i class="material-icons">assignment</i>
            </a>
        </div>

        <ul class="center">
            <li><span id="letters-counter">0</span> letters</li>
            <li><span id="words-counter">0</span> words</li>
        </ul>
        <section class="scoreboard">
            <h3 class="center">Scoreboard</h3>
            <table class="centered bordered">
                <thead>
                    <th>User</th>
                    <th>No. of words</th>
                    <th>Remove</th>
                </thead>
                <tbody>
                    <tr>
                        <td>user1</td>
                        <td>99</td>
                        <td>
                            <a href="#" class="button-remove">
                                <i class="small material-icons">delete</i>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/scoreboard.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

这是我与记分牌功能相关的Javascript：

function insertScoreboard() {
    var tableBody = $(".scoreboard").find("tbody");
    var user = "Leonardo";
    var numberWords = $("#number-counter").text();

    var line = newLine(user,numberWords);

    line.find(".button-remove").click(removeLine);

    tableBody.prepend(line);

    $(".scoreboard").slideDown(500);
    scrollScoreboard();
}

function newLine(user, words) {
    var line = $("<tr>");
    var columnUser = $("<td>").text(user);
    var columnWords = $("<td>").text(words);
    var link = $("<a>").attr("href","#").addClass("button-remove");
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");
    var columnRemove = $("<td>");

    link.append(icone);
    colunaRemover.append(link);
    linha.append(columnUser);
    linha.append(columnWords);
    line.append(columnRemove);

    return line;
}

function removeLine(event) {
    event.preventDefault();
    var line = $(this).parent().parent();

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

}

$("#botao-scoreboard").click(showScoreboard);

function showScoreboard() {
    $(".scoreboard").stop().slideToggle(600);
}

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

Answer 1

无论出于何种原因，Firefox都会从HTML标记计算溢出，而不是正文。只需将html添加到选择器。

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

Jquery动画在Firefox中不起作用

1 个答案: