Atributo CSS scroll-behavior

Definição e uso

A propriedade scroll-behavior determina se a posição de rolagem será movida suavemente (com efeito de animação) quando o usuário clicar em um link dentro da caixa de rolagem, em vez de saltar diretamente.

Exemplo

Adicionar efeito de rolagem suave ao documento:

html {
  scroll-behavior: smooth;
}

Experimente você mesmo

Sintaxe do CSS

scroll-behavior: auto|smooth|initial|inherit;

Valor da propriedade

Valor Descrição
auto Valor padrão. Permite saltar diretamente entre os elementos dentro da caixa de rolagem.
smooth Permite um efeito de rolagem suave entre os elementos dentro da caixa de rolagem.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Visão do CSSOM (projeto de trabalho)
Sintaxe do JavaScript: object.style.scrollBehavior="smooth"

Suporte do navegador

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

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