滚动到指定div触发滚动后页面卡顿，如何仅从顶部滚动时触发？

问题根源 #

你的代码存在两个核心问题：

1. 动画重复触发：每次滚动只要满足条件就执行animate，导致浏览器同时叠加执行多个滚动动画，直接引发页面卡顿甚至无法正常滚动。
2. 无滚动方向判断：没有区分用户是向上还是向下滚动，向上滚动时也可能触发自动滚动逻辑。

修复方案 #

通过添加滚动方向判断和触发锁机制解决上述问题，修改后的代码如下：

JavaScript 代码

// 记录上一次滚动位置，初始为0
let lastScrollTop = 0;
// 标记是否正在执行滚动动画，防止重复触发
let isAnimating = false;

jQuery(window).scroll(function() {
  // 如果正在执行动画，直接返回，避免重复触发
  if (isAnimating) return;

  const hT = jQuery('.trigegr').offset().top,
        hH = jQuery('.trigegr').outerHeight(),
        wH = jQuery(window).height(),
        wS = jQuery(this).scrollTop();

  // 判断是否为向下滚动：当前滚动位置 > 上一次滚动位置
  const isScrollDown = wS > lastScrollTop;

  // 满足触发条件 + 向下滚动时执行自动滚动
  if (isScrollDown && wS > (hT + hH - wH)) {
    isAnimating = true;
    jQuery('html, body').animate({
      scrollTop: jQuery("#scroll-too").offset().top
    }, 2000, function() {
      // 动画完成后解锁，允许后续触发（如果需要仅触发一次，可删除此解锁逻辑）
      isAnimating = false;
    });
  }

  // 更新上一次滚动位置
  lastScrollTop = wS;
});

CSS 代码（无需修改）

div {
  height: 800px;
  background: red;
}

h1 {
  display: none;
}

HTML 代码（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Scroll Down</div>
<h1 class="trigegr">I am The H1</h1>

<br><br><br><br><br><br>
<h2 id="scroll-too">I am The H2</h2>

关键逻辑说明 #

• 滚动方向判断：通过对比lastScrollTop（上一次滚动位置）和当前scrollTop，确定用户是否在向下滚动。
• 触发锁机制：isAnimating变量在动画开始时设为true，阻止滚动事件重复触发动画；动画完成后再设为false，恢复可触发状态（如果希望自动滚动仅执行一次，可移除动画回调里的解锁代码）。
• 动画叠加避免：每次滚动事件先检查isAnimating，正在动画时直接退出，从根源上避免多个滚动动画叠加。

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