要實現平滑的滾動效果,可以使用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
的間隔時間,可以調整滾動的速度和平滑程度。