Scroll suave com CSS e JavaScript

1a atrás

Ion

---

0 0

Existem diversas técnicas para implementar scroll suave no #HTML, uma das mais simples é na utilização das formas nativas.

CSS

No #CSS, você pode simplesmente adicionar o código abaixo na sua página:

html {
  scroll-behavior: smooth;
}

<a href="#section2">GO TO SECTION 2</a>

<section id="section2"></section>

JavaScript

No #JavaScript você também pode usar as soluções nativas para scroll suave, presentes nas diversas funções de scroll como Window.scrollTo() e Element.scrollIntoView(), basta usar o behavior smooth.

window.scrollTo({ top: 500, left: 0, behavior: 'smooth' });

document.querySelector('section').scrollIntoView({ behavior: 'smooth' });