Rolar até um elemento com JavaScript

Rolar até um elemento em JavaScript

Rolar até um elemento em JavaScript: opções do scrollIntoView ao vivo | We.Inc

Teste cada opção do scrollIntoView em uma caixa ao vivo, corrija títulos escondidos sob um header fixo com scroll-margin-top e copie código de rolagem suave em JavaScript e em CSS puro.

Chame element.scrollIntoView({ behavior: 'smooth', block: 'start' }) para trazer um elemento para a tela. O block decide onde ele fica na vertical: start, center, end ou nearest. Se um header fixo cobrir o alvo, dê ao alvo um scroll-margin-top igual à altura do header no CSS, em vez de calcular deslocamentos em JavaScript.

Opções do scrollIntoView

Opção
Valores
Padrão

"smooth", "instant", "auto" (segue o scroll-behavior do CSS)
"auto"

block (vertical)
"start", "center", "end", "nearest"
"start"

inline (horizontal)
"start", "center", "end", "nearest"
"nearest"

true / false em vez de opções
true = block start, false = block end (inline nearest)

Há três formas de levar a página até um elemento: scrollIntoView no elemento, scrollTo com uma posição em pixels e um link simples para um id. O playground mostra o que cada valor de block faz e como o scroll-margin-top mantém um título livre de uma barra fixa; depois, os exemplos cobrem o código de que você precisa para menus, erros de formulário e listas no estilo de chat.

Escolha uma linha alvo e um valor de block, depois aperte Rolar. Só a caixa de demonstração se move, então esta página fica parada.
Aumente a margem de rolagem até a altura da barra fixa cinza e veja o alvo parar logo abaixo dela.
Alterne o behavior entre smooth e instant para comparar os dois.
Copie a chamada scrollIntoView e a regra CSS geradas para a sua própria página.

O scroll-margin-top também vale quando alguém abre um link para #secao, então uma única regra CSS resolve tanto os cliques quanto as URLs compartilhadas.
Use block: 'nearest' para navegar por uma lista com o teclado. Ele rola só o necessário e não faz nada se o item já estiver visível.
Rolagem suave em uma página longa pode parecer lenta. Envolva html { scroll-behavior: smooth } em uma media query prefers-reduced-motion: no-preference para que quem pede menos movimento tenha saltos instantâneos.
O scrollIntoView move todos os ancestrais roláveis, incluindo a página. Quando só um painel interno deve se mover, defina o scrollTop desse painel ou chame panel.scrollTo.

Perguntas frequentes

Como rolo até um elemento com um deslocamento para um header fixo?

Adicione scroll-margin-top ao alvo, por exemplo h2 { scroll-margin-top: 80px }. A especificação de CSS scroll snap pede que os navegadores respeitem essa margem no scrollIntoView e em links para #ids, mesmo sem nenhum snapping em uso.

Como deixo a rolagem suave?

Passe behavior: 'smooth' para o scrollIntoView ou o scrollTo, ou defina scroll-behavior: smooth no elemento html para que toda rolagem via código e todo link interno sejam animados. O scroll-behavior não tem efeito na rolagem feita pelo usuário com a roda do mouse ou o toque.

Qual a diferença entre scrollIntoView e scrollTo?

O scrollIntoView parte de um elemento e calcula a posição para você. O window.scrollTo({ top, behavior }) vai para uma posição exata em pixels, e o scrollBy se move por uma quantidade relativa. Use scrollTo quando você já tem um número, como ao voltar para uma posição salva.

Como rolo até o topo da página?

window.scrollTo({ top: 0, behavior: 'smooth' }). Para um painel rolável, chame o mesmo método no elemento do painel em vez de window.

Por que o scrollIntoView não faz nada?

As causas comuns são chamá-lo antes de o elemento existir (rode depois da renderização, por exemplo em um effect do React), o elemento estar com display: none, ou a opção nearest com um elemento que já está totalmente visível.

Escolhendo um valor de block

O start serve para saltos até uma seção ou título, porque o leitor começa pelo topo dela. O center funciona bem para chamar a atenção para um único campo, como o primeiro input inválido de um formulário. O end combina com um chat ou log em que o item mais novo deve ficar embaixo.
O nearest é a opção discreta: ele move a menor distância necessária e deixa em paz os itens visíveis, que é o que você quer quando uma tecla de seta move o destaque por uma lista.

Fazendo sem JavaScript

Um link comum como <a href="#pricing"> já rola até o elemento com id pricing, atualiza a barra de endereço e funciona com o botão voltar. Adicione scroll-behavior: smooth ao elemento html e scroll-margin-top aos alvos, e muitos menus de sumário não precisam de script nenhum.
Recorra ao JavaScript quando a rolagem vier de algo que não é o clique em um link: um formulário que falha na validação, uma nova mensagem chegando ou um resultado de busca sendo selecionado.

Código para rolar até um elemento

Rolagem suave até uma seção

Busca o elemento pelo id e leva a borda superior dele até o topo da tela.

Deslocamento do header fixo em CSS

Uma regra resolve a sobreposição tanto nas rolagens via script quanto nos links que terminam em #id. A media query pula a animação para quem prefere movimento reduzido.

Trazer o primeiro campo inválido para a tela

O center mantém o campo e o rótulo dele no meio da tela; o foco também leva os usuários de teclado até lá.

Rolar só dentro de um painel

Usa a posição do item dentro do painel, então a página em volta não se move.

React: rolar até uma ref

A ref aponta para o nó do DOM depois que ele foi renderizado, então a chamada acontece em um handler de clique ou em um effect.

Playground do scrollIntoView

Esta caixa tem a sua própria barra fixa. Escolha uma linha e as opções, depois role. A caixa aplica o mesmo cálculo de alinhamento com scrollTo, então o resto da página fica parado.

Linha alvo: {n}

scroll-margin-top: {n}px

Rolar

Voltar ao topo da caixa

Barra fixa, 40px de altura

Linha {n}

Caixa de rolagem de demonstração

Código para a sua página

Comece grátis · Sem cartão de crédito