gpt4 book ai didi

javascript - 如何使window.scrollTo()具有平滑效果

转载 作者:IT王子 更新时间:2023-10-29 03:21:20 25 4
gpt4 key购买 nike

我可以使用以下方法滚动到 200px

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

但是我想要一个平滑的滚动效果。我该怎么做?

最佳答案

2018年更新

现在您可以只使用 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>

关于javascript - 如何使window.scrollTo()具有平滑效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42261524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com