如何实现用户滚动时自动触发JS函数跳转至指定页面区域？

核心思路 #

• 监听页面滚动事件，判断用户是否在第一个区块内向下滚动
• 触发跳转后立即移除滚动监听，防止重复触发
• 结合防抖逻辑避免滚动事件频繁触发

完整代码实现 #

先给第一个区块添加id（比如first-section），方便计算滚动范围：

<!-- 第一个区块 -->
<section id="first-section">
  <!-- 区块内容 -->
</section>

<!-- 第二个目标区块 -->
<section id="moreinfo">
  <!-- 区块内容 -->
</section>

对应的JavaScript实现：

function scroll_to_target() {
  // 开启平滑滚动到目标区块
  document.getElementById("moreinfo").scrollIntoView({ behavior: 'smooth' });
  // 触发后移除滚动监听，避免重复触发
  window.removeEventListener('scroll', handleScroll);
}

// 防抖函数：减少滚动事件的触发频率，优化性能
function debounce(func, delay = 100) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

function handleScroll() {
  const firstSection = document.getElementById('first-section');
  const firstSectionHeight = firstSection.offsetHeight;
  // 获取当前页面滚动距离
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // 判断：仅当用户在第一个区块内向下滚动时触发跳转
  if (scrollTop > 0 && scrollTop < firstSectionHeight) {
    scroll_to_target();
  }
}

// 页面加载完成后，绑定带防抖的滚动监听
window.addEventListener('load', () => {
  window.addEventListener('scroll', debounce(handleScroll));
});

关键细节说明 #

• 防抖逻辑：滚动事件会高频触发，防抖能有效减少函数执行次数，避免不必要的性能消耗
• 移除监听：跳转完成后立刻取消滚动监听，防止用户后续滚动时重复触发跳转
• 滚动范围判断：通过第一个区块的高度和当前滚动距离，精准控制触发条件
• 平滑滚动：给scrollIntoView传入{ behavior: 'smooth' }参数，实现自然的滚动过渡效果

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