原生JS实现平滑回顶动画效果

前往漫画官网入口并下载

有志者，事竟成！如果你在学习文章，那么本文《原生JS实现流畅回顶动画效果》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

页面回顶动画的挑战与jQuery animate()的局限性

在网页设计中，为用户提供一个平滑的“滚动至顶部”功能是提升用户体验的常见实践。传统上，许多开发者会选择使用jQuery的animate()方法来实现这一效果，因为它简单易用。然而，在特定场景下，例如较长的动画时长（如4000-6000毫秒）、在Chrome等现代浏览器中，或者当项目受限于旧版jQuery（如2.1.3）且无法替换时，animate()方法可能会导致动画出现卡顿或不流畅的问题。这通常是由于jQuery的动画机制与浏览器渲染循环的同步不够优化，尤其是在处理复杂的动画曲线（如easeInOutCubic）时，其性能瓶颈会更加明显。

尽管jQuery结合jQuery Easing插件可以提供多种缓动效果，但其底层实现可能无法充分利用现代浏览器提供的requestAnimationFrame这一高性能动画API。当动画帧率与浏览器刷新率不匹配时，就会产生视觉上的卡顿感。

利用原生JavaScript实现高性能平滑滚动

为了克服jQuery animate()的局限性，并实现真正流畅的页面回顶动画，我们可以转而使用原生JavaScript。原生JS结合requestAnimationFrame API，能够将动画的每一帧与浏览器的绘制周期同步，从而确保动画在最佳时机执行，避免不必要的重绘和卡顿，提供如同原生应用般的平滑体验。

核心实现思路

1. 事件监听：监听页面的滚动事件以控制回顶按钮的显示与隐藏，以及按钮的点击事件来触发滚动动画。
2. 自定义动画循环：使用requestAnimationFrame来替代传统的setInterval或setTimeout，实现与浏览器渲染同步的动画循环。
3. 缓动函数：手动实现或引入一个三次贝塞尔缓动函数（easeInOutCubic），以控制滚动速度的变化，使动画从慢到快再到慢，更加自然。
4. DOM操作：使用原生DOM API进行元素的显示/隐藏操作。

HTML结构

首先，我们需要一个简单的HTML元素作为我们的“滚动至顶部”按钮。这个按钮可以是一个链接或一个带有特定ID的div。

<a id="scrlTop" href="#" class="hide"></a>

<!-- 引入Font Awesome图标，如果需要的话 -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<!-- 页面内容，用于演示滚动效果 -->
<div style="height:2000px;">
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i></h3>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i></h3>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i></h3>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i></h3>
</div>

CSS样式

为回顶按钮添加基本的样式，使其固定在页面底部右侧，并默认隐藏。

#scrlTop {
    position: fixed;
    bottom: 16.6px;
    right: 18px;
    width: 57px;
    height: 57px;
    border-radius: 0%; /* 可根据需求调整 */
    background-color: black; /* 按钮背景色 */
    display: none; /* 默认隐藏 */
    backface-visibility: hidden; /* 优化GPU渲染 */
    transform: translateZ(0); /* 优化GPU渲染 */
}

/* 页面背景及其他示例样式 */
body {
    background-image: url(https://images.unsplash.com/photo-1484542603127-984f4f7d14cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTh8fHxlbnwwfHx8fHw%3D&w=1000&q=80);
    font-family: 'Open Sans', sans-serif;
}
h3 {
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    margin-top: 50px;
}
h3 i {
    color: #c6c6c6;
}

JavaScript逻辑

以下是实现平滑滚动回顶功能的核心JavaScript代码。

// 获取回顶按钮元素
var scrlTop = document.getElementById('scrlTop');

// 监听窗口滚动事件，控制按钮的显示与隐藏
window.addEventListener('scroll', function() {
    if (window.pageYOffset > 350) { // 当页面滚动超过350px时显示按钮
        fadeIn(scrlTop);
    } else {
        fadeOut(scrlTop);
    }
});

// 监听回顶按钮的点击事件
scrlTop.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认的链接跳转行为
    animateScrollTop(0, 4800); // 调用动画函数，滚动到顶部（0px），动画时长4800ms
});

/**
 * 元素渐显函数 (简化版，直接设置display)
 * @param {HTMLElement} element - 要显示的DOM元素
 */
function fadeIn(element) {
    element.style.display = 'block';
}

/**
 * 元素渐隐函数 (简化版，直接设置display)
 * @param {HTMLElement} element - 要隐藏的DOM元素
 */
function fadeOut(element) {
    element.style.display = 'none';
}

/**
 * 平滑滚动到指定位置的动画函数
 * @param {number} target - 目标滚动位置（通常是0表示顶部）
 * @param {number} duration - 动画持续时间（毫秒）
 */
function animateScrollTop(target, duration) {
    var startPosition = window.pageYOffset; // 动画开始时的当前滚动位置
    var distance = target - startPosition; // 需要滚动的总距离
    var startTime = null; // 动画开始时间戳

    /**
     * 动画循环函数，由requestAnimationFrame调用
     * @param {DOMHighResTimeStamp} currentTime - 当前时间戳
     */
    function scrollAnimation(currentTime) {
        if (startTime === null) {
            startTime = currentTime; // 记录动画开始时间
        }
        var timeElapsed = currentTime - startTime; // 动画已进行的时间
        // 根据缓动函数计算当前帧的滚动位置
        var scrollPosition = easeInOutCubic(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, scrollPosition); // 设置新的滚动位置

        // 如果动画未结束，则继续请求下一帧
        if (timeElapsed < duration) {
            requestAnimationFrame(scrollAnimation);
        }
    }

    /**
     * 三次贝塞尔缓动函数 (easeInOutCubic)
     * @param {number} t - 当前时间 (time elapsed)
     * @param {number} b - 初始值 (beginning value)
     * @param {number} c - 变化量 (change in value)
     * @param {number} d - 持续时间 (duration)
     * @returns {number} - 经过缓动计算后的值
     */
    function easeInOutCubic(t, b, c, d) {
        t /= d / 2;
        if (t < 1) {
            return c / 2 * t * t * t + b;
        }
        t -= 2;
        return c / 2 * (t * t * t + 2) + b;
    }

    // 启动动画
    requestAnimationFrame(scrollAnimation);
}

注意事项与最佳实践

1. requestAnimationFrame的优势：

   • 性能优化：它告诉浏览器你希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的回调函数更新动画。这意味着动画帧与浏览器刷新率同步，避免了不必要的计算和绘制，减少了CPU和GPU的负担。
   • 节能：当页面不在前台时，requestAnimationFrame会暂停执行，从而节省电量。
   • 避免丢帧：浏览器可以在最佳时机执行动画，减少卡顿和丢帧。

2. 缓动函数：上述代码中包含了easeInOutCubic缓动函数的实现。你可以根据需要替换为其他缓动函数，如线性（linear）、二次方（easeInQuad）等，或者使用更复杂的贝塞尔曲线生成器来创建自定义缓动效果。

3. 兼容性：requestAnimationFrame在现代浏览器中得到了广泛支持。对于旧版浏览器，可以考虑使用Polyfill，但对于本教程所针对的“Chrome卡顿”问题，原生支持已足够。

4. 性能考量：虽然原生JS通常更高效，但在动画回调函数中执行复杂的DOM操作或大量计算仍可能导致性能问题。保持动画逻辑简洁，避免在每一帧中进行昂贵的计算。

5. 替代方案：如果项目允许使用现代JavaScript框架或库，许多库（如GreenSock Animation Platform (GSAP) 或 Popmotion）提供了更强大、更灵活且高度优化的动画解决方案。然而，对于受限于特定环境（如旧版jQuery）或追求极致轻量级的场景，原生JS方案是理想选择。

总结

通过采用原生JavaScript并结合requestAnimationFrame和自定义缓动函数，我们能够构建一个比jQuery animate()更平滑、更高效的页面回顶动画。这种方法不仅解决了在特定浏览器和动画时长下可能出现的卡顿问题，还提供了更高的性能和更精细的控制，确保了在各种环境下都能为用户提供卓越的滚动体验。这种去库化的实现方式对于那些对性能有严格要求、或者需要在受限环境中（如只能使用旧版jQuery）工作的项目尤为适用。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~