I can scroll to 200px using the following
btn.addEventListener("click", function(){
window.scrollTo(0,200);
})
But I want a smooth scroll effect. How do I do this?
This question is related to
javascript
css
scroll
css-animations
css-transitions
Now you can use just window.scrollTo({ top: 0, behavior: 'smooth' }) to get the page scrolled with a smooth effect.
const btn = document.getElementById('elem');_x000D_
_x000D_
btn.addEventListener('click', () => window.scrollTo({_x000D_
top: 400,_x000D_
behavior: 'smooth',_x000D_
}));#x {_x000D_
height: 1000px;_x000D_
background: lightblue;_x000D_
}<div id='x'>_x000D_
<button id='elem'>Click to scroll</button>_x000D_
</div>You can do something like this:
var btn = document.getElementById('x');_x000D_
_x000D_
btn.addEventListener("click", function() {_x000D_
var i = 10;_x000D_
var int = setInterval(function() {_x000D_
window.scrollTo(0, i);_x000D_
i += 10;_x000D_
if (i >= 200) clearInterval(int);_x000D_
}, 20);_x000D_
})body {_x000D_
background: #3a2613;_x000D_
height: 600px;_x000D_
}<button id='x'>click</button>ES6 recursive approach:
const btn = document.getElementById('elem');_x000D_
_x000D_
const smoothScroll = (h) => {_x000D_
let i = h || 0;_x000D_
if (i < 200) {_x000D_
setTimeout(() => {_x000D_
window.scrollTo(0, i);_x000D_
smoothScroll(i + 10);_x000D_
}, 10);_x000D_
}_x000D_
}_x000D_
_x000D_
btn.addEventListener('click', () => smoothScroll());body {_x000D_
background: #9a6432;_x000D_
height: 600px;_x000D_
}<button id='elem'>click</button>$('html, body').animate({scrollTop:1200},'50');
You can do this!
Source: Stackoverflow.com