jquery animate在Firefox中不起作用

我正在做一個JavaScript遊戲，其中程序給玩家寫一個句子，計算字母，單詞並在記分牌上顯示結果的時間。每當我完成每一輪時，我都有一個滾動效果，將頁面向下滾動到記分板，但我的代碼只能在Chrome上運行。有沒有人有任何想法如何扭轉這種情況？jquery animate在Firefox中不起作用

這是我的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); 
}

來源

2017-05-06 starKiller

無論出於何種原因，Firefox的HTML標記，而不是身體計算溢出。只需將html添加到選擇器即可。

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

來源

2017-05-06 20:59:53 Phix

jquery animate在Firefox中不起作用

回答

相關問題