Scroll suave com CSS e JavaScript

339d atrás

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;
}
Com esse código, você já vai ter o efeito de scroll suave. Você pode testar com uma âncora no seu site.

<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' });
Lembrando que, caso você já tenha definido o scroll-behavior no CSS, você não precisa passar o behavior nessas funções.


Comentários (0)

0/512
Link