Scroll até determinado elemento com JavaScript

1a atrás

0 0

Element.scrollIntoView()

O método mais simples para rolar até um elemento específico é usando a função Element.scrollIntoView();

document.querySelector('.my-element').scrollIntoView();
Por padrão, o elemento ficará alinhado com o topo da área visível do elemento pai. Essa função pode receber opções para personalizar seu comportamento padrão, inclusive para rolagem suave.
document.querySelector('.my-element').scrollIntoView({ behavior: 'smooth' });

Para mais informações, acesse:

Element.scrollIntoView() - APIs da Web | MDN

O método Element.scrollIntoView() move o elemento ao qual é aplicado para a área visível da janela do navegador.

Window.scrollTo()

Outra opção é usar a função window.scrollTo(); passando como argumento a propriedade top do elemento que você quer rolar até o topo.

window.scrollTo({ top: document.querySelector('.my-element').getBoundingClientRect().top + window.scrollY });

Window.scrollTo também pode receber opções, veja mais em:

Window: scrollTo() method - Web APIs | MDN

Window.scrollTo() scrolls to a particular set of coordinates in the document.


Comentários (0)

0/512
Link