原生js平滑滚动

原生JavaScript实现平滑滚动主要依赖于window.scrollTo方法结合requestAnimationFrame来实现平滑动画效果。以下是实现平滑滚动的基础概念、优势、类型、应用场景以及示例代码。

基础概念

平滑滚动：指页面或元素在滚动时不是瞬间跳转到目标位置，而是通过逐渐移动的方式平滑过渡到目标位置。
window.scrollTo：该方法用于滚动到文档中的特定位置。
requestAnimationFrame：这是一个优化动画效果的API，它会在浏览器重绘之前调用指定的回调函数，以达到更平滑的动画效果。

优势

用户体验：平滑滚动提供了更自然的视觉体验，减少突兀感。
性能优化：使用requestAnimationFrame可以确保动画在浏览器准备重绘时执行，避免不必要的计算和绘制，从而提高性能。
兼容性：原生JavaScript方法具有较好的跨浏览器兼容性。

类型

页面平滑滚动：整个页面滚动到指定位置。
元素内部平滑滚动：页面内某个特定元素内的内容滚动到指定位置。

应用场景

导航菜单跳转：点击导航链接时，页面平滑滚动到相应的部分。
回到顶部按钮：点击按钮后，页面平滑滚动回到顶部。
长页面内容导航：在长页面中，用户可以通过点击侧边栏快速定位到页面的不同部分。

示例代码

以下是一个简单的原生JavaScript实现页面平滑滚动的示例：

function smoothScroll(targetPosition, duration) {
    const startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    let startTime = null;

    function animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const run = ease(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, run);
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function ease(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;
    }

    requestAnimationFrame(animation);
}

// 使用示例
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetId = this.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
            smoothScroll(targetElement.offsetTop, 500); // 500是滚动持续时间，单位毫秒
        }
    });
});