要实现页面的平滑滚动，核心在于利用bom接口结合requestanimationframe逐步更新滚动位置。1. 使用window.scrollto()或scrolltop属性控制滚动目标；2. 通过requestanimationframe实现与浏览器刷新率同步的动画循环；3. 引入缓动函数（如ease-out）提升滚动自然感；4. 记录起始时间、计算进度并动态调整滚动位置；5. 在动画完成或用户干预时及时终止循环。相比css的scroll-behavior: smooth，该方法具备更高的控制粒度、更广的兼容性和更强的扩展性，适用于复杂交互场景。开发时应封装为可复用函数，并支持目标参数化、偏移量设置、容器滚动及promise回调等特性，以提升代码效率和用户体验。
要实现页面的平滑滚动，核心在于利用浏览器提供的BOM（Browser Object Model）接口，特别是window.scrollTo()或window.scrollBy()，并结合动画循环机制（通常是requestAnimationFrame）来逐步、平滑地改变滚动位置，而不是一下子跳过去。这就像电影里的慢镜头，把一个瞬间的动作分解成无数个微小的帧，让它看起来连贯自然。
解决方案
平滑滚动的基本思路是计算出每次动画帧需要滚动的距离，然后不断更新页面的scrollTop或scrollLeft属性，直到达到目标位置。这个过程需要一个起始点、一个目标点、一个动画持续时间，以及一个决定动画速度变化的“缓动函数”（easing function）。
我们通常会这样做：
- 记录初始状态：获取当前的滚动位置和目标滚动位置。
- 计算动画总时长：确定滚动需要多少毫秒完成。
- 使用requestAnimationFrame：这是一个浏览器API，告诉浏览器你希望执行一个动画，并请求浏览器在下一次重绘之前调用你指定的回调函数。它比setTimeout或setInterval更适合动画，因为它能确保动画与浏览器的刷新率同步，避免卡顿和掉帧。
- 在回调函数中：
- 计算自动画开始以来经过的时间。
- 根据经过的时间和缓动函数，计算出当前应该滚动的进度（0到1之间的一个值）。
- 根据进度和总滚动距离，计算出当前应该到达的滚动位置。
- 调用window.scrollTo()或直接设置document.documentElement.scrollTop（或document.body.scrollTop，取决于文档模式）来更新滚动位置。
- 如果动画还没结束，继续调用requestAnimationFrame，形成循环。
- 如果动画结束，停止循环。
这是一个简化的JavaScript示例：
function smoothScrollTo(targetY, duration = 500) { const startY = window.pageYOffset; // 当前滚动位置 const distanceY = targetY - startY; // 需要滚动的总距离 let startTime = null; // 缓动函数：这里用一个简单的 ease-out const easeOutQuad = (t) => t * (2 - t); function animateScroll(currentTime) { if (!startTime) startTime = currentTime; const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); // 进度，0到1 const easedProgress = easeOutQuad(progress); // 应用缓动函数 window.scrollTo(0, startY + distanceY * easedProgress); if (progress < 1) { requestAnimationFrame(animateScroll); } } requestAnimationFrame(animateScroll); } // 示例用法：点击按钮平滑滚动到页面顶部 // document.getElementById('backToTopBtn').addEventListener('click', () => { // smoothScrollTo(0); // });
为什么不直接用css的scroll-behavior: smooth？
说实话，当scroll-behavior: smooth这个css属性出来的时候，我心里是窃喜的，觉得终于可以少写点JS了。它确实方便，只需要在CSS里给html或body加上scroll-behavior: smooth;，然后当你点击一个锚点链接（如）或者调用element.scrollIntoView()时，页面就会自动平滑滚动，省心省力。
但话说回来，这东西虽然好用，却不是万能的。它有几个明显的局限性：
- 控制粒度不够：CSS的smooth只是一个开关，你无法自定义动画的时长、缓动曲线。比如，你可能希望某个滚动特别快，另一个则慢悠悠地滑过去，CSS就做不到了。它就是“平滑”，但具体怎么“平滑”，它说了算，你说了不算。
- 兼容性问题：虽然现代浏览器支持度不错，但如果你需要兼容一些老旧的浏览器，或者你的用户群体中有大量使用特定旧版浏览器的，那CSS方案可能就得打个问号了。BOM方案虽然复杂点，但兼容性通常更好，因为它是基于JavaScript的通用能力。
- 不适用于任意滚动：scroll-behavior: smooth主要针对的是由用户行为（如点击锚点）或scrollIntoView()触发的滚动。如果你想实现一个按钮，点击后平滑滚动到页面某个计算出来的、非固定位置（比如某个动态加载的内容顶部），或者你希望在特定事件发生时（比如数据加载完成）自动滚动到某个区域，CSS就有点力不从心了。BOM方案则提供了对window.scrollTo和window.scrollBy的完全控制，可以精确地指定滚动目标。
- 缺乏事件回调：CSS动画是“fire and forget”式的，你无法知道动画什么时候开始、什么时候结束，也就没法在动画完成后执行其他操作。而JS方案可以通过Promise或者回调函数来监听动画完成事件，这在很多复杂交互场景下是必不可少的。
所以，在我看来，scroll-behavior: smooth更适合那些对滚动控制要求不高、追求快速实现且不考虑老旧浏览器兼容性的场景。一旦你需要更精细的控制、更复杂的逻辑，或者更广泛的兼容性，BOM方案依然是你的首选，因为它给了你真正的“主宰权”。
实现平滑滚动时，如何处理动画性能和用户体验？
平滑滚动这事儿，搞不好就成了“卡顿滚动”或者“抽搐滚动”，所以性能和用户体验是重中之重。
动画性能方面：
- requestAnimationFrame的魔力：我前面提过，用requestAnimationFrame是关键。它不是简单地每隔多少毫秒执行一次，而是告诉浏览器：“喂，我这里有个动画，你下次渲染画面前记得叫我一声，我好更新一下位置。”浏览器会把多个动画请求合并处理，并在最佳时机执行，这能有效减少不必要的重绘和回流，避免动画卡顿。对比setTimeout和setInterval，后两者可能在浏览器忙碌时导致帧率不稳定，甚至掉帧，而requestAnimationFrame则能更好地与浏览器的渲染周期同步。
- 避免在循环内做重活：在requestAnimationFrame的回调函数里，只做最核心的计算和dom操作——更新滚动位置。避免在这个函数里执行复杂的DOM查询、大量的布局计算或者网络请求。这些“重活”应该在动画开始前就准备好，或者在动画结束后再进行。
- 精简DOM操作：虽然我们只操作了scrollTop，但也要注意，频繁地读写DOM属性（特别是那些会触发布局重算的属性）是性能杀手。好在scrollTop的设置相对轻量，但如果动画涉及到更复杂的元素位置变化，就要特别小心了。
用户体验方面：
- 缓动函数（Easing Function）的选择：这玩意儿简直是平滑滚动的灵魂！一个线性的滚动（匀速）会显得很生硬，就像机器人走路。而一个好的缓动函数能让滚动过程更自然、更富有生命力。
- Ease-out：动画开始时快，结束时慢，给人一种“刹车”的感觉，很常用，比如我上面示例用的easeOutQuad。
- Ease-in：动画开始时慢，结束时快，有点像“加速”的感觉。
- Ease-in-out：开始和结束都慢，中间快，感觉最平滑自然，就像汽车起步加速再减速停车。 你可以去搜一下“Penner’s easing functions”，里面有各种各样的数学公式，能模拟出不同的动画效果。选择一个合适的缓动函数，能极大提升用户感知的流畅度。
- 动画时长：这是一个经验值。太短（比如100ms）会感觉像瞬间跳跃，不够“平滑”；太长（比如2000ms）又会让人觉得等待太久，失去耐心。通常，300ms到800ms是一个比较舒服的范围，具体取决于滚动的距离和内容的重要性。短距离可以快一点，长距离可以适当放慢。
- 可中断性：用户在动画过程中可能会手动滚动页面。一个好的平滑滚动函数应该能检测到用户的干预，并立即停止当前的动画，将控制权交还给用户。这通常通过监听scroll事件，并在用户滚动时清除当前的requestAnimationFrame来实现。
- 目标明确：确保用户知道滚动会去哪里。如果滚动目标在屏幕外很远的地方，最好能给用户一个视觉提示，比如滚动条的变化或者一个指示器。
综合来说，实现平滑滚动不仅仅是写几行代码那么简单，它涉及到对浏览器渲染机制的理解，以及对用户心理的把握。
编写可复用的平滑滚动函数有哪些技巧？
为了避免每次需要平滑滚动时都写一堆重复的代码，把逻辑封装成一个可复用的函数是明智之举。一个健壮且灵活的平滑滚动函数，通常会考虑以下几点：
-
参数化设计：
- target：目标位置，可以是数字（Y坐标），也可以是一个DOM元素（函数内部计算其Y坐标）。这让函数既能滚动到精确的像素位置，也能滚动到某个元素的顶部。
- duration：动画持续时间，毫秒为单位，默认值可以设为500ms。
- easing：缓动函数，可以作为参数传入。这样用户可以根据需要选择不同的缓动效果。如果用户不传，就用一个默认的（比如easeOutQuad）。
- offset：滚动到目标位置时，可以有一个额外的偏移量。比如，你滚动到一个标题，但希望标题上方留出50px的间距，这个参数就很有用。
-
返回Promise：让函数返回一个Promise，这样外部代码就能知道动画何时完成，从而在动画结束后执行其他操作。这比传统的传入回调函数更现代，也更利于异步流程控制。
-
处理多重调用和中断：
- 取消上一个动画：如果用户在当前动画还没结束时又触发了新的滚动，应该立即停止前一个动画，开始新的动画。这可以通过保存当前的requestAnimationFrame ID，并在新动画开始前调用cancelAnimationFrame来实现。
- 用户手动滚动中断：监听scroll事件。如果用户在动画进行中手动滚动了页面，也应该立即取消当前的动画。这需要一个标志位来区分是程序滚动还是用户滚动。
-
支持滚动特定容器：不仅仅是window，有时我们也需要让某个可滚动容器（div、iframe等）内部平滑滚动。函数应该能接受一个container参数，如果提供了，就操作这个容器的scrollTop，否则默认操作window。
-
健壮性考虑：
- 边界条件：目标位置是否有效？持续时间是否为正数？
- 兼容性：考虑document.documentElement.scrollTop和document.body.scrollTop在不同浏览器和文档模式下的差异。通常现代浏览器推荐使用document.documentElement.scrollTop。
这是一个更完善的平滑滚动函数骨架：
let currentScrollAnimationId = null; // 用于存储当前的 requestAnimationFrame ID function getScrollParent(element) { let parent = element.parentNode; while (parent && parent !== document.body && parent !== document.documentElement) { const style = getComputedStyle(parent); if (style.overflowY === 'auto' || style.overflowY === 'scroll') { return parent; } parent = parent.parentNode; } return window; // 默认返回window } function smoothScroll(target, options = {}) { if (currentScrollAnimationId) { cancelAnimationFrame(currentScrollAnimationId); currentScrollAnimationId = null; } const { duration = 500, easing = (t) => t * (2 - t), // 默认 easeOutQuad offset = 0, container = window // 默认滚动window，也可以传入DOM元素 } = options; let startY; let targetY; let scrollElement; if (container === window) { startY = window.pageYOffset; scrollElement = document.documentElement; // 现代浏览器通常用这个 if (document.body.scrollTop) { // 兼容IE和旧版Safari scrollElement = document.body; } } else { startY = container.scrollTop; scrollElement = container; } if (typeof target === 'number') { targetY = target; } else if (target instanceof HTMLElement) { const rect = target.getBoundingClientRect(); if (container === window) { targetY = rect.top + window.pageYOffset; } else { const containerRect = container.getBoundingClientRect(); targetY = rect.top - containerRect.top + container.scrollTop; } } else { console.error('Invalid target for smoothScroll. Must be a number or an HTMLElement.'); return Promise.reject('Invalid target'); } targetY += offset; const distanceY = targetY - startY; let startTime = null; return new Promise((resolve) => { function animateScroll(currentTime) { if (!startTime) startTime = currentTime; const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); const easedProgress = easing(progress); const newScrollPos = startY + distanceY * easedProgress; if (container === window) { window.scrollTo(0, newScrollPos); } else { scrollElement.scrollTop = newScrollPos; } if (progress < 1) { currentScrollAnimationId = requestAnimationFrame(animateScroll); } else { currentScrollAnimationId = null; resolve(); // 动画完成 } } currentScrollAnimationId = requestAnimationFrame(animateScroll); }); } // 示例用法： // 1. 平滑滚动到页面顶部 // smoothScroll(0).then(() => console.log('滚动到顶部完成！')); // 2. 平滑滚动到某个元素 // const myElement = document.getElementById('some-section'); // if (myElement) { // smoothScroll(myElement, { duration: 800, offset: -20 }).then(() => { // console.log('滚动到指定元素完成！'); // }); // } // 3. 平滑滚动某个容器内部 // const scrollableDiv = document.getElementById('my-scrollable-div'); // if (scrollableDiv) { // smoothScroll(0, { container: scrollableDiv, duration: 600 }).then(() => { // console.log('div内部滚动到顶部完成！'); // }); // }
这个函数虽然看起来复杂了一点，但它提供了很高的灵活性和可维护性。在实际项目中，一个这样封装好的工具函数能大大提升开发效率和代码质量。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
