2018-2020 Pure js:
Existe uma maneira muito conveniente de rolar para o elemento:
el.scrollIntoView({
behavior: 'smooth', // smooth scroll
block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})
Mas, tanto quanto eu entendo, ele não tem um apoio tão bom quanto as opções abaixo.
Saiba mais sobre o método
Se for necessário que o elemento esteja no topo:
const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset
window.scrollTo({
top: topPos, // scroll so that the element is at the top of the view
behavior: 'smooth' // smooth scroll
})
Exemplo de demonstração no Codepen
Se você deseja que o elemento esteja no centro:
const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.scroll({
top: rect.top + rect.height / 2 - viewHeight / 2,
behavior: 'smooth' // smooth scroll
});
Exemplo de demonstração no Codepen
Apoio, suporte:
Eles escrevem que scroll
é o mesmo método quescrollTo
, mas o suporte mostra melhor scrollTo
.
Mais sobre o método
<a href="#anchorName">link</a>