要實現平滑滾動，可以使用JavaScript中的requestAnimationFrame方法來控制滾動的速度和幀率。以下是一個示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
#content {
height: 2000px;
}
</style>
</head>
<body>
<div id="content"></div>
<script>
function smoothScrollTo(element, to, duration) {
var start = element.scrollTop;
var change = to - start;
var startTime = performance.now();
function easeInOutQuad(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
function animateScroll() {
var currentTime = performance.now();
var timeElapsed = currentTime - startTime;
element.scrollTop = parseInt(easeInOutQuad(timeElapsed, start, change, duration));
if (timeElapsed < duration) {
requestAnimationFrame(animateScroll);
} else {
element.scrollTop = to;
}
}
animateScroll();
}
var content = document.getElementById("content");
smoothScrollTo(content, 1000, 1000); // 滾動到1000px的位置，耗時1000ms
</script>
</body>
</html>
在這個示例中，smoothScrollTo函數接受三個參數：要滾動的元素、目標位置和持續時間。在animateScroll函數中，通過requestAnimationFrame實現動畫效果，使用easeInOutQuad函數來實現平滑的滾動效果。您可以根據需要調整目標位置和持續時間來達到想要的效果。
