返回顶部功能始终带动画？如何实现瞬间返回顶部

你的核心问题是：页面中引入的滚动动画类脚本（GSAP、Velocity或自定义scroll脚本）劫持了原生滚动行为，导致即使调用window.scrollTo也会触发平滑动画。以下是具体排查和解决方法：

一、嫌疑脚本锁定 #

从你引入的资源来看，这些脚本是导致滚动动画的高概率原因：

• gsap.min.js：GSAP的ScrollSmoother/ScrollTrigger模块常被用来全局启用平滑滚动
• velocity.min.js/velocity.ui.min.js：该库本身就是动画工具，可能被配置为处理滚动过渡
• scroll.js/main.js：自定义脚本中可能存在全局平滑滚动的绑定逻辑

二、直接解决方案：强制无动画回顶 #

优先尝试最直接的原生DOM操作，绕过所有可能的脚本劫持：

btn.on('click', function(e) {
    e.preventDefault(); // 阻止按钮可能的默认跳转行为
    // 直接设置滚动容器的scrollTop，完全绕过动画钩子
    const scrollEl = document.documentElement || document.body;
    scrollEl.scrollTop = 0;
});

如果上述代码仍有动画，显式声明scrollTo的行为参数：

btn.on('click', function(e) {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: 'auto' // 强制使用原生无动画滚动，覆盖全局平滑设置
    });
});

三、针对第三方库的适配方案 #

1. 若问题来自GSAP #

如果页面用了GSAP的ScrollSmoother，需要临时禁用平滑滚动再回顶：

btn.on('click', function(e) {
    e.preventDefault();
    // 暂停GSAP平滑滚动
    if (window.scrollSmoother) scrollSmoother.pause();
    // 瞬间回顶
    document.documentElement.scrollTop = 0;
    // 可选：100ms后恢复平滑滚动
    setTimeout(() => {
        if (window.scrollSmoother) scrollSmoother.resume();
    }, 100);
});

2. 若问题来自自定义脚本 #

检查scroll.js/main.js中是否有类似全局平滑滚动的代码，比如：

// 全局锚点平滑滚动
$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    $('html,body').animate({scrollTop: ...}, 500);
});

给你的返回顶部按钮添加例外类（比如no-smooth），修改全局脚本：

// 排除带有no-smooth类的按钮
$('a[href^="#"]:not(.no-smooth)').on('click', function(e) {
    // 原有平滑滚动逻辑
});

四、排查验证步骤 #

1. 临时注释掉gsap.min.js、velocity.min.js、scroll.js，测试回顶按钮是否恢复无动画
2. 根据注释后是否正常，锁定具体的干扰脚本，再用对应方案适配

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