Hoje em dia, utilizando o Google Chrome, se trocarmos o seletor $("html") por $("body") a função de scroll não funciona.
Alguém saberia explicar por que não funciona?
Do modo como está abaixo, funciona corretamente.
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
$("html").animate(
{
scrollTop: posicaoPlacar + "px"
}, 1000);
}
Oi, Daniel, tudo bem?
Você verificou se a sua tag body foi declarada corretamente no seu arquivo html? Pode verificar ou caso prefira coloca aqui o seu arquivo para vermos juntos o porquê disso. :}
Oi, Daniel!
De fato, até o momento o seletor "body" não será afetado no Chrome. Como você mesmo percebeu, ao usar "html" o efeito desejado é atingido, certo?!
Então o que você pode fazer para resolver o problema - independente do navegador - é passar os dois parâmetros :
$("html,body").animate(
{
scrollTop: posicaoPlacar+"px"
},1000);Dessa forma, tanto no chrome quanto no firefox a sua animação será bem executada.
Att,
Boa tarde,
Boa dica para funcionar em ambos, João!
Mas alguém teria alguma resposta sobre o porquê desse comportamento diferente em diferentes navegadores?
Segue abaixo meu código html completo, como pedido pela Laís :)
<!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/estilos.css">
<link rel="stylesheet" href="css/libs/google-fonts.css">
</head>
<body>
<!-- Seja bem vindo ao curso de jQuery :) -->
<div class="container"">
<h1 class="center"> Alura Typer</h1>
<p class="frase center">Esta frase tem 8 belas palavras.</p>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase"></span> palavras</li>
<li>
<i class="small material-icons icones">query_builder</i>
<span id="tempo-digitacao">2</span> segundos</li>
</ul>
<textarea class="campo-digitacao" cols="40" rows="8"></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>
<a id="botao-frase" class="btn-floating btn-large waves-effect waves-light blue">
<i class="material-icons">shuffle</i>A
</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>
<tr>
<th>Nome</th>
<th>No. de Palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daniel</td>
<td>15</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/main.js"></script>
<script src="js/placar.js"></script>
<script src="js/frase.js"></script>
</body>
</html>Agradeço a ajuda!
Oi, Daniel, tudo bem?
Muito possivelmente porque os navegadores tem por padrão um estilo próprio e isso interfere no comportamento de cada aplicação. Usa-se os reset css para retirar o estilo padrão dos navegadores para evitar essas diferenças. Escrevi sobre isso: https://github.com/laiscavalcanti/textos-blog-alura/blob/master/resetCss.md
Qualquer dúvida é só falar :}