如何仅用JavaScript减慢平滑滚动默认速度？附回车滚动代码

嗨，我明白你的需求——原生的scrollBehavior: smooth确实没法直接调整速度，所以我们得自己用JavaScript实现一个可控速度的平滑滚动效果，完全不需要jQuery。

你的原代码用了window.scrollBy，但原生的平滑滚动速度是浏览器内置的，没法修改。所以我们可以用requestAnimationFrame来手动控制每帧滚动的距离，这样就能精准调整速度了。

这里给你一个完整的实现方案：

// 保存动画帧ID，用于取消重复触发
let scrollAnimationId = null;

document.body.onkeyup = function(e) {
    if(e.keyCode === 13) {
        // 计算需要滚动的总距离：页面底部位置 - 当前滚动位置
        const targetScrollTop = document.documentElement.scrollHeight - window.innerHeight;
        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const distance = targetScrollTop - currentScrollTop;

        // 如果已经在底部，直接返回
        if(distance <= 0) return;

        // 取消之前的动画（防止多次回车触发叠加）
        if(scrollAnimationId) {
            cancelAnimationFrame(scrollAnimationId);
        }

        // 定义滚动参数：可以调整duration（持续时间，毫秒）来控制速度
        const duration = 1500; // 1.5秒滚动到底部，数值越大越慢
        let startTime = null;

        function smoothScroll(currentTime) {
            if(!startTime) startTime = currentTime;
            const timeElapsed = currentTime - startTime;
            // 用缓动函数让滚动更自然（可选，也可以用线性的timeElapsed/duration）
            const progress = Math.min(timeElapsed / duration, 1);
            const easeProgress = progress < 0.5 
                ? 2 * progress * progress 
                : 1 - Math.pow(-2 * progress + 2, 2) / 2;

            // 计算当前需要滚动到的位置
            const currentPosition = currentScrollTop + (distance * easeProgress);
            window.scrollTo(0, currentPosition);

            // 如果还没完成，继续下一帧
            if(timeElapsed < duration) {
                scrollAnimationId = requestAnimationFrame(smoothScroll);
            } else {
                // 确保最后精准滚动到底部
                window.scrollTo(0, targetScrollTop);
                scrollAnimationId = null;
            }
        }

        // 启动动画
        scrollAnimationId = requestAnimationFrame(smoothScroll);
    }
};

代码细节说明： #

• 动画流畅度：用requestAnimationFrame替代定时器，它会和浏览器刷新节奏同步，滚动效果更丝滑。
• 速度调节：修改duration数值就能控制快慢——比如设为2000就是2秒完成滚动，数值越大滚动越慢。
• 自然缓动：加入了缓动函数，让滚动开始时加速、结束时减速，比匀速滚动更符合用户预期；如果想要纯匀速，直接把easeProgress换成progress即可。
• 防重复触发：每次触发回车前先取消上一次的动画，避免多次回车导致滚动叠加混乱。
• 边界判断：先检查是否已经在页面底部，避免无效的滚动操作。

这样实现后，你就能完全掌控回车触发的滚动速度啦！

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