是否可在指定div元素内或到达其内容时触发URL重定向？

该需求完全可以基于原生前端能力实现，不需要引入第三方依赖，核心是通过滚动监听判断指定div的可视位置，满足条件时执行跳转，同时必须做好防重复触发处理。

基础DOM结构 #

先构建页面结构，添加足够的占位内容撑出滚动高度，目标div和你的示例保持一致：

<!-- 上方占位内容，撑出页面可滚动空间 -->
<div style="height: 1500px; background: #f0f0f0;">页面顶部占位区域</div>

<!-- 滚动到该div时触发跳转的目标元素 -->
<div id="id45">
  这里是指定div的内容区域
</div>

核心实现逻辑 #

• 绑定页面滚动事件，实时计算目标div相对于当前浏览器视口的位置
• 当目标div的内容进入视口范围时，执行URL跳转动作
• 设置全局触发标记，避免滚动过程中多次重复执行跳转逻辑

可直接复用的实现代码 #

// 跳转触发标记，防止逻辑重复执行
let hasTriggerRedirect = false;

window.addEventListener('scroll', () => {
  // 已经触发过跳转则直接跳过后续判断
  if (hasTriggerRedirect) return;

  // 获取目标div的位置参数
  const targetDiv = document.getElementById('id45');
  const divPosition = targetDiv.getBoundingClientRect();
  const viewportHeight = window.innerHeight;

  // 判断目标div是否进入当前视口范围
  if (divPosition.top < viewportHeight && divPosition.bottom > 0) {
    hasTriggerRedirect = true;
    // 执行跳转，替换为实际需要的目标地址即可
    window.location.replace('/your-target-path');
  }
})

实操注意点 #

• 一定要加防重复触发标记，不然滚动过程中判断逻辑会被高频触发，轻则造成页面卡顿，重则出现跳转逻辑异常
• 如果是单页应用场景，把window.location.replace替换为对应框架的路由跳转方法即可，位置判断逻辑完全通用
• 可以根据实际体验调整触发条件，比如设置为目标div完全进入视口后再跳转，减少跳转的突兀感
• 对性能要求较高的场景，可以给滚动监听加节流处理，降低滚动时的计算频率

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