要实现平滑的滚动效果,可以使用setInterval
结合window.scrollTo
来实现。以下是一个简单的示例代码:
let targetPosition = 0;
let currentPosition = window.pageYOffset;
let smoothScrollInterval;
function smoothScroll() {
if (currentPosition < targetPosition) {
window.scrollTo(0, currentPosition);
currentPosition += 10; // 控制滚动速度
smoothScrollInterval = setTimeout(smoothScroll, 10); // 间隔时间
} else {
window.scrollTo(0, targetPosition);
clearInterval(smoothScrollInterval);
}
}
function scrollToPosition(position) {
targetPosition = position;
currentPosition = window.pageYOffset;
smoothScroll();
}
// 调用示例
scrollToPosition(500); // 滚动到500px位置
在上面的示例中,当调用scrollToPosition
函数时,会启动一个setInterval
来平滑地滚动到目标位置。通过控制currentPosition
的增加速度和setInterval
的间隔时间,可以调整滚动的速度和平滑程度。