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

通过监听窗口滚动事件，结合 `scrollintoview()` 方法，可在用户首次向下滚动时自动平滑定位到目标区块（如第二章节），无需依赖 jquery，原生 javascript 即可高效实现。

要实现“用户一滚动就自动跳转至第二区块”的效果，核心在于：仅在首次向下滚动时触发一次跳转，并防止重复执行。直接在 scroll 事件中无条件调用 scrollIntoView() 会导致连续触发、页面抖动甚至卡死，因此需添加状态控制与方向判断。

以下为推荐的原生 javaScript 实现方案（兼容现代浏览器，无需 jquery）：

// 缓存目标元素与状态标记 const targetElement = document.getElementById("moreinfo"); let hasScrolledToTarget = false;  function scrollToTarget() {   if (targetElement && !hasScrolledToTarget) {     targetElement.scrollIntoView({       behavior: "smooth",       block: "start"     });     hasScrolledToTarget = true; // 标记已触发，避免重复执行   } }  // 监听滚动事件，仅在向下滚动且处于首屏区域时触发 let lastScrollTop = 0; window.addEventListener("scroll", () => {   const scrollTop = window.pageYOffset || document.documentElement.scrollTop;    // 判断是否为向下滚动，且当前仍在第一区块可视范围内（例如：滚动距离 < 80% 视口高度）   if (scrollTop > lastScrollTop && scrollTop < window.innerHeight * 0.8) {     scrollToTarget();   }    lastScrollTop = scrollTop; });

✅ 关键说明：

• 使用 behavior: "smooth" 确保滚动动画流畅；
• block: "start" 使目标元素顶部对齐视口顶部，视觉更自然；
• hasScrolledToTarget 防止多次触发，提升性能与用户体验；
• 结合 scrollTop 变化方向与阈值判断，避免误触（如用户快速上下滚动）；
• 不依赖外部库，轻量、可靠、符合现代 Web 开发实践。

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

• 确保 #moreinfo 元素已存在于 dom 中（建议脚本置于