Cómo hacer window.scrollTo() con un efecto suave

Revisamos de forma completamente cada noticias de nuestro espacio con el objetivo de mostrarte siempre información veraz y certera.

Solución:

Actualización 2018

Ahora puedes usar solo window.scrollTo( top: 0, behavior: 'smooth' ) para que la página se desplace con un efecto suave.

const btn = document.getElementById('elem');

btn.addEventListener('click', () => window.scrollTo(
  top: 400,
  behavior: 'smooth',
));

#x 
  height: 1000px;
  background: lightblue;

  Click to scroll

Soluciones más antiguas

Puedes hacer algo como esto:

var btn = document.getElementById('x');

btn.addEventListener("click", function() 
  var i = 10;
  var int = setInterval(function() 
    window.scrollTo(0, i);
    i += 10;
    if (i >= 200) clearInterval(int);
  , 20);
)

body 
  background: #3a2613;
  height: 600px;

click

ES6 enfoque recursivo:

const btn = document.getElementById('elem');

const smoothScroll = (h) => 
  let i = h 

btn.addEventListener('click', () => smoothScroll());

body 
  background: #9a6432;
  height: 600px;

click

$('html, body').animate(scrollTop:1200,'50');

¡Puedes hacerlo!

Si te ha sido provechoso nuestro artículo, sería de mucha ayuda si lo compartieras con el resto seniors de esta forma nos ayudas a difundir nuestro contenido.

---

---

Utiliza Nuestro Buscador