Puedo desplazarme a 200px usando lo siguiente
btn.addEventListener("click", function(){ window.scrollTo(0,200); })Pero quiero un efecto de desplazamiento suave. ¿Cómo hago esto?
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>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>Enfoque recursivo ES6 :
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>$('html, body').animate({scrollTop:1200},'50');¡Puedes hacerlo!