我可以使用以下内容滚动到200px
btn.addEventListener("click", function(){
window.scrollTo(0,200);
})
但是我想要一个平滑的滚动效果.我该怎么做呢?
我可以使用以下内容滚动到200px
btn.addEventListener("click", function(){
window.scrollTo(0,200);
})
但是我想要一个平滑的滚动效果.我该怎么做呢?
现在,您只需使用window.scrollTo({ top: 0, behavior: 'smooth' })
即可获得平滑效果的页面滚动.
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>
你可以这样做:
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递归方法:
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>