javascript - div - window.scrollto animate

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

Question

Puedo desplazarme hasta 200px usando lo siguiente

btn.addEventListener("click", function(){
window.scrollTo(0,200);
})

Pero quiero un efecto de desplazamiento suave. ¿Cómo hago esto?

Answer 1

Actualización 2018

Ahora puede usar solo window.scrollTo({ top: 0, behavior: ''smooth'' }) para hacer 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;
}

<div id=''x''>
<button id=''elem''>Click to scroll</button>
</div>

Soluciones 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;
}

<button id=''x''>click</button>

ES6 enfoque recursivo:

const btn = document.getElementById(''elem'');
const smoothScroll = (h) => {
let i = h || 0;
if (i < 200) {
setTimeout(() => {
window.scrollTo(0, i);
smoothScroll(i + 10);
}, 10);
}
}
btn.addEventListener(''click'', () => smoothScroll());

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

<button id=''elem''>click</button>

Answer 2

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

¡Puedes hacer esto hermano!