移动端页面滚动状态下点击回到顶部按钮首次点击无效的解决方案咨询

阿华AIGC实验室

2026-4-29

解决移动端滚动中点击回到顶部按钮首次无效的问题

嘿，这个问题我之前在做移动端项目时也遇到过！本质上是因为移动端浏览器在页面滚动（尤其是惯性滚动）过程中，会优先处理滚动相关的事件，导致你的点击事件被“挤掉”了，首次点击就没触发成功。咱们一步步来解决它：

先分析下原代码的小问题

混用了原生JS和jQuery，其实用jQuery可以更简洁地处理兼容性（比如不同浏览器的scrollTop获取）
点击事件里只调用了$('html').goTo()，有些移动端浏览器（比如Safari）需要同时操作html和body才能生效
最关键的：滚动过程中，浏览器的触摸滚动事件还在持续，抢占了点击事件的响应优先级

两种可行的修复方案

方案一：暂时禁用滚动，确保点击事件生效

点击按钮时先锁住页面滚动，等回到顶部的动画完成后再恢复，这样就能避免滚动事件干扰点击：

var goToTopBtn = $("#goToTop"); 

// 监听滚动，控制按钮显示/隐藏
$(window).scroll(function() {
    $(window).scrollTop() > 900 ? goToTopBtn.fadeIn() : goToTopBtn.fadeOut();
});

// 封装回到顶部的动画方法
$.fn.goTo = function() {
    // 先禁用页面滚动
    $('body').css('overflow', 'hidden');
    // 同时操作html和body，兼容所有浏览器
    $('html, body').animate({ 
        scrollTop: 0 
    }, 400, function() {
        // 动画结束后恢复滚动
        $('body').css('overflow', 'auto');
    });
    return this;
};

// 绑定点击事件
goToTopBtn.on("click", function() {
    $('html, body').goTo();
});

方案二：停止当前滚动动画，强制触发回到顶部

通过stop()方法终止页面的惯性滚动动画，让回到顶部的动画立即执行：

var goToTopBtn = $("#goToTop"); 

// 用passive优化滚动事件，避免阻塞主线程（移动端性能更友好）
$(window).on('scroll', { passive: true }, function() {
    $(window).scrollTop() > 900 ? goToTopBtn.fadeIn() : goToTopBtn.fadeOut();
});

$.fn.goTo = function() {
    // 停止所有正在运行的动画，包括页面的惯性滚动
    $('html, body').stop(true, true);
    $('html, body').animate({ 
        scrollTop: 0 
    }, 400);
    return this;
};

goToTopBtn.on("click", function() {
    $('html, body').goTo();
});