Chrome中ScrollTop滚动卡顿问题求助

问题背景 #

• 环境限制：仅允许使用jQuery 2.1.3，无法升级版本；运行于cargo.site平台
• 核心问题：使用easeInOutCubic缓动的4800ms滚动到顶部动画出现卡顿，无法实现流畅效果
• 测试环境：Chrome 113.0.5672.127、Win10 64位

方案一：适配jQuery 2.1.3的JS修复方案 #

针对jQuery 2.x版本的动画兼容性问题，通过自定义缓动函数、优化动画目标元素来解决卡顿：

修改后的JavaScript代码

// 内置自定义easeInOutCubic缓动函数，无需依赖外部easing库
$.easing.easeInOutCubic = function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
    return c / 2 * ((t -= 2) * t * t + 2) + b;
};

// 简化按钮显示/隐藏逻辑
$(window).scroll(function() {
    $('#scrlTop').toggle($(this).scrollTop() > 350);
});

// 优化滚动动画逻辑
$('#scrlTop').click(function(e) {
    e.preventDefault();
    // 仅对body执行动画，避免html/body双元素动画冲突
    $('body').animate({
        scrollTop: 0
    }, 4800, 'easeInOutCubic');
});

关键优化点

• 内置缓动函数：避免外部jquery.easing.min.js与jQuery 2.1.3的版本兼容问题
• 单元素动画：仅操作body而非同时操作html,body，消除Chrome中双元素动画的滚动冲突
• 简化逻辑：用toggle()替代fadeIn/fadeOut，减少不必要的DOM操作

方案二：纯CSS模拟Cubic Bezier滚动方案 #

利用浏览器原生滚动行为实现流畅动画，完全替代JS动画，适合长时长滚动场景：

调整后的HTML代码

<!-- 页面顶部添加锚点 -->
<div id="top"></div>

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

<!-- 保留原页面内容 -->
<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;
}

/* 配置原生滚动行为，模拟easeInOutCubic曲线 */
html {
    scroll-behavior: smooth;
    /* 贝塞尔曲线值与easeInOutCubic完全匹配 */
    scroll-behavior: cubic-bezier(0.65, 0, 0.35, 1);
}

/* 保留原额外样式 */
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;}

补充说明

• 原生滚动由浏览器底层处理，流畅度远高于JS模拟动画，尤其适合4000ms以上的长时长滚动
• 若需保留按钮的显示/隐藏逻辑，可继续使用原JS的滚动监听代码，仅替换点击后的滚动行为
• Chrome 113完全支持scroll-behavior和自定义贝塞尔曲线，无需兼容性处理

内容的提问来源于stack exchange，提问作者typo_