优化页面回顶动画：使用原生JavaScript实现流畅滚动体验

<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>

#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;
}

// 获取回顶按钮元素
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);
}