在现代网页交互设计中，平滑滚动是一项常用的用户体验技巧。本文聚焦 JavaScript 平滑滚动实现技巧：从原理到实践的完整指南，从原理到代码实现，带你系统掌握滚动动画的核心要点与落地技巧。
通过分步骤的讲解，你将理解滚动距离、时间、缓动曲线之间的关系，并掌握在不同场景下的实现方式，提升页面互动性与用户留存。
1. 平滑滚动的核心原理
1.1 何谓滚动距离与时间曲线
滚动距离决定了需要移动的垂直位移，而滚动时间决定了动画的持续时长。理解这两者的关系，是实现稳定平滑滚动的基础。
在实现中，常将当前滚动位置记为起点 currentY，目标位置记为 targetY，二者的差值为 distance。通过逐帧更新滚动位置，把当前位移逐步推送到目标值，从而产生平滑的视觉效果。
1.2 线性滚动与缓动函数的区别
线性滚动在时间轴上均匀推进，容易产生机械感，不符合直觉的加减速规律。
使用缓动函数可以实现自然的开始与结束体验，例如 easeInOutCubic、easeOutQuart 等。缓动曲线决定了速度在时间上的变化，直接影响观感与可控性。
2. 常见实现思路对比：CSS vs JavaScript
2.1 CSS 的简单平滑滚动
CSS 提供了简单且高效的平滑滚动能力，极大简化了实现成本，尤其适用于锚点导航。
采用方法是通过 CSS 属性 scroll-behavior: smooth，让页面滚动行为自动带有平滑过渡效果。
html {scroll-behavior: smooth;
}
对于现代浏览器，这种方式非常方便，但控制粒度有限，难以实现自定义缓动曲线与逐帧控制，在某些复杂场景需要回退到 JavaScript 实现。
2.2 JavaScript 的灵活性与控制
JavaScript 实现提供了可控性与可扩展性，可以精确设定持续时间、缓动曲线、回调以及取消等逻辑。
相比 CSS，通过 JS 可以处理滚动中断、边界处理、不同目标元素的滚动等复杂场景，从而在复杂页面中实现一致的体验。
3. 使用 requestAnimationFrame 的自定义平滑滚动实现
3.1 基本方案：从当前滚动到目标
基本思路是通过 requestAnimationFrame 持续更新滚动位置，在每帧根据时间进度计算当前进度并应用到窗口滚动位置。
核心要点包括：获取起点 currentY、计算目标距离 distance、记录起始时间 startTime，并在每帧按比例应用进度值。
function smoothScrollTo(targetY, duration = 600) {const startY = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;const distance = targetY - startY;const startTime = performance.now();function easeInOutCubic(t) {return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2;}function step(now) {const elapsed = now - startTime;const t = Math.min(1, elapsed / duration);const eased = easeInOutCubic(t);window.scrollTo(0, startY + distance * eased);if (t < 1) {requestAnimationFrame(step);}}requestAnimationFrame(step);
}
通过上面的实现，可以对任意目标滚动位置进行精准控制，并且能够很好地与自定义缓动曲线结合，达到自然的滚动体验。
3.2 添加缓动函数与可选参数
为了提升灵活性，我们可以将缓动函数、偏移量、回调等参数化，使同一函数适用于更多场景。
例如支持自定义缓动、设定滚动前后偏移、以及滚动完成的回调。
function smoothScrollTo(targetY, {duration = 600,offset = 0,easing = function(t){ return t; }, // 线性作为默认onComplete = null
} = {}) {const startY = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;const distance = targetY - startY - offset;const startTime = performance.now();function step(now) {const elapsed = now - startTime;const t = Math.min(1, elapsed / duration);const eased = easing(t);window.scrollTo(0, startY + distance * eased + offset);if (t < 1) {requestAnimationFrame(step);} else if (typeof onComplete === 'function') {onComplete();}}requestAnimationFrame(step);
}
将缓动函数作为参数传入，可以快速尝试不同的滚动节奏，同时支持在滚动结束时执行回调，方便链式交互与状态更新。
4. 进阶技巧与跨浏览器兼容性
4.1 兼容性与 polyfill
部分旧浏览器对 requestAnimationFrame 的支持不完善，因此需要一个轻量的回退实现。
通过简单的 polyfill，可以确保在低版本浏览器上仍然具有平滑滚动能力，并尽量保持与现代实现一致的行为。
window.requestAnimationFrame = window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||function(callback) { return setTimeout(function() { callback(performance.now()); }, 16); };window.cancelAnimationFrame = window.cancelAnimationFrame ||window.webkitCancelAnimationFrame ||function(id) { clearTimeout(id); };
这类 polyfill 能显著提升跨浏览器兼容性，尤其在兼容性需求较高的企业站点中很有价值。
4.2 与页面事件的协同工作
在实际页面中，通常需要将平滑滚动与导航行为绑定，例如点击锚点或自定义导航控件。
一个常见的做法是拦截默认锚点跳转，计算目标元素的垂直偏移，然后调用 smoothScrollTo 来实现平滑滚动。
document.querySelectorAll('a[href^="#"]').forEach(anchor => {anchor.addEventListener('click', function(e) {e.preventDefault();const targetId = this.getAttribute('href').substring(1);const targetEl = document.getElementById(targetId);if (targetEl) {const targetY = targetEl.getBoundingClientRect().top + window.pageYOffset;smoothScrollTo(targetY, {duration: 800,easing: function(t){ // easeInOutreturn t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2;}});}});
});
通过结合事件监听与自定义滚动实现，可以在各种导航场景中保持一致的滚动体验，提升页面的可用性与美观度。
