Como criar: rolagem suave

Aprenda como usar CSS para criar efeitos de rolagem suaves.

Rolagem suave

Section 1
Clique aqui, rolagem suave até a seção 2 inferior.

Clique no link para ver o efeito de rolagem 'suave'.

Atenção:Remova a propriedade scroll-behavior para cancelar a rolagem suave.

Rolagem suave

Adicione para o elemento <html> scroll-behavior: smooth Pode ativar a rolagem suave em toda a página:

Atenção:também pode adicioná-lo a elementos específicos/contêineres de rolagem.

Exemplo

html {
  scroll-behavior: smooth;
}

Experimente pessoalmente

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente a propriedade de rolagem.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

solução cross-browser

para navegadores que não suportam scroll-behavior para navegadores que não suportam jQuery）para criar uma solução cross-browser para todos os navegadores:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Adicione rolagem suave para todos os links
  $("a").on('click', function(event) {
    // Certifique-se de que this.hash possui um valor antes de sobrescrever o comportamento padrão
    if (this.hash !== "") {
      // Evite o comportamento padrão do clique de âncora
      event.preventDefault();
      // Armazene o valor do hash
      var hash = this.hash;
      // Utilize o método animate() do jQuery para adicionar rolagem suave na página
      // Número opcional (800) especifica os milissegundos necessários para rolar até a área especificada
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Após concluir a rolagem, adicione o número (#) ao URL (comportamento padrão de clique)
        window.location.hash = hash;
      );
    } // Fim do if
  );
);
</script>

Experimente pessoalmente

Páginas relacionadas

Manual de referência:Propriedade CSS scroll-behavior