JavaScript中如何实现平滑滚动？

在网页交互设计中，平滑滚动是提升用户体验的重要细节，相比默认的瞬间跳转，平滑滚动能让页面过渡更自然。JavaScript实现平滑滚动有多种可行方案，开发者可以根据项目需求选择合适的实现方式。

一、使用原生CSS属性实现

最简单的方式是通过CSS的scroll-behavior属性实现，不需要编写额外的JavaScript逻辑，只要在需要滚动的容器上添加该属性即可。

这种方式适合全局或者局部容器的滚动需求，配置非常简单，但是自定义程度较低，无法调整滚动速度和缓动效果。

/* 全局滚动平滑 */
html {
    scroll-behavior: smooth;
}

/* 局部容器滚动平滑 */
.scroll-container {
    scroll-behavior: smooth;
    height: 500px;
    overflow-y: auto;
}

二、使用window.scrollTo原生方法

现代浏览器支持window.scrollTo方法的配置参数，可以直接传入behavior: 'smooth'实现平滑滚动，不需要自己编写动画逻辑。

这种方式适合滚动到页面指定位置的需求，兼容性比CSS方案稍好，同样自定义程度有限。

// 滚动到页面顶部
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

// 滚动到指定元素位置
function scrollToElement(elementId) {
    const target = document.getElementById(elementId);
    if (target) {
        window.scrollTo({
            top: target.offsetTop,
            behavior: 'smooth'
        });
    }
}

三、自定义动画实现平滑滚动

如果需要自定义滚动速度、缓动效果，可以使用requestAnimationFrame自己编写滚动动画逻辑，这种方式灵活性最高。

核心思路是计算当前滚动位置和目标位置的差值，按照设定的速度和缓动函数逐步调整滚动位置，直到到达目标位置。

/**
 * 自定义平滑滚动函数
 * @param {number} targetPosition 目标滚动位置
 * @param {number} duration 滚动持续时间，单位毫秒
 */
function customSmoothScroll(targetPosition, duration = 500) {
    const startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    let startTime = null;

    // 缓动函数，这里使用 easeInOutQuad
    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 animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const run = easeInOutQuad(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, run);
        if (timeElapsed < duration) {
            requestAnimationFrame(animation);
        }
    }

    requestAnimationFrame(animation);
}

// 使用示例：滚动到距离顶部1000px的位置
customSmoothScroll(1000, 800);

四种方案对比

不同实现方式的特性对比如下，开发者可以根据实际需求选择：

注意事项

• 使用CSS方案时，如果页面中有需要禁用平滑滚动的场景，可以单独给对应容器设置scroll-behavior: auto
• 自定义动画实现时，要注意处理滚动过程中用户手动滚动的情况，避免动画冲突
• 如果项目需要兼容旧版本浏览器，建议优先选择自定义动画方案，或者添加对应的polyfill

JavaScript平滑滚动scroll-behaviorwindow.scrollTorequestAnimationFrame修改时间：2026-06-05 02:23:14