如何使用 JavaScript 在用户滚动时自动跳转到指定元素

碧海醫心 2026-01-12 00:00:00 次阅读

本文介绍如何通过监听窗口滚动事件，实现在用户首次向下滚动时自动平滑滚动至页面指定区域（如第二部分内容），无需依赖 jquery，纯原生 javascript 即可高效实现。

要实现在用户首次向下滚动时自动跳转到目标元素（例如 ID 为 moreinfo 的第二章节），关键在于：
✅ 监听 scroll 事件；
✅ 判断滚动方向（仅响应向下的滚动）；
✅ 防止重复触发（滚动过程中只执行一次）；
✅ 使用 scrollIntoView({ behavior: 'smooth' }) 实现平滑过渡。

以下是完整、健壮的原生 JavaScript 实现：

// 标记是否已触发过自动跳转
let hasScrolledToTarget = false;

function scroll_to_target() {
  const target = document.getElementById("moreinfo");
  if (target) {
    target.scrollIntoView({ behavior: "smooth", block: "start" });
  }
}

// 记录上一次滚动位置
let lastScrollTop = 0;

window.addEventListener("scroll", function () {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // 判断是否为向下滚动，且尚未触发过跳转
  if (scrollTop > lastScrollTop && !hasScrolledToTarget) {
    scroll_to_target();
    hasScrolledToTarget = true; // 锁定，避免重复执行
  }

  lastScrollTop = scrollTop;
});

? 注意事项与优化建议：

✅ 性能优化：scroll 事件频繁触发，本方案通过布尔标记和方向判断天然节流，无需额外使用 throttle；如需更高性能，可结合 requestAnimationFrame 进一步优化。
✅ 兼容性：scrollIntoView({ behavior: 'smooth' }) 在现代浏览器中广泛支持（Chrome 61+、Firefox 68+、Edge 79+、Safari 15.4+）；若需兼容旧版 Safari，可添加 CSS 回退：html { scroll-behavior: smooth; }。
⚠️ 用户体验提示：自动跳转可能打断用户操作，建议在首屏内容较短、且明确希望引导用户查看下一部分时使用；也可加入延迟（如 setTimeout(scroll_to_target, 300)）或阈值判断（如 scrollTop > 100）提升可控性。

该方案轻量、可靠、无第三方依赖，适合嵌入任何静态或动态网站中，是实现“滚动即导航”交互的理想实践。