jQuery scrollTop返回顶部后无法立即向下滚动问题求解

1. 你遇到的10秒等待本质是多段滚动动画叠加执行的总时长：因为click事件被重复绑定，每次点击返回顶部按钮都会同时触发N个scrollTop:0的动画，每个动画时长800ms，累加后就会出现近10秒的动画执行周期。动画运行期间会持续修改页面滚动位置，覆盖手动滚动的效果，因此你会觉得“无法向下滚动”。
2. 原代码执行滚动动画前没有清空已有动画队列，就算没有重复绑定问题，多次快速点击按钮也会出现动画堆积的情况。

按以下两点修改代码即可解决问题：

• 绑定点击事件前先调用.off('click')解绑已注册的同类型事件，从根源避免重复注册
• 执行滚动动画前先调用.stop(true, false)清空动画队列，允许手动滚动打断正在执行的动画

// 注意：请提前定义stickyHeader变量，原代码未包含该变量的初始化逻辑，可替换为实际阈值
let stickyHeader = 100 

$(window).on('scroll', function() {
  /*  PROGRESS BAR  */
  if ($("div").hasClass("progress-content")) {
    if (($(this).scrollTop() + $(this).height()) >= $(".progress-content").offset().top) {
      $('.progress-bar').each(function() {
        var getPercent = $(this).data('percent') / 100;
        var getProgressWrapWidth = $(this).width();
        var progressTotal = getPercent * getProgressWrapWidth;
        var animationLength = 1500;
        $(this).stop().animate({
          left: progressTotal
        }, animationLength);
      });
    }
  }

  /*  BACK TO TOP  */
  if ($(this).scrollTop() != 0) {
    $(".back-to-top").fadeIn();
  } else {
    $(".back-to-top").fadeOut();
  };

  /*  STICKY HEADER  */
  if ($(this).scrollTop() > stickyHeader) {
    $('.sticky-header .header-menu').addClass("sticky");
    $('.sticky-header .header .open.category-menu').addClass('closed');
  } else {
    $('.header-menu').removeClass("sticky");
    $('.header .open.category-menu').removeClass('closed');
  }
});

// 核心修改部分
$(".back-to-top").off('click').on('click', function() {
  $("body, html").stop(true, false).animate({
    scrollTop: 0
  }, 800);
});

如果需要实现“动画执行期间用户手动滚动就直接终止返回顶部动画”的效果，可以额外添加以下代码：

$('body, html').on('wheel touchmove', function() {
  $(this).stop(true, false);
});

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