如何设置按钮跳转至另一页面的中间区域

下面是两种实用的实现方案，按需选择即可：

方法一：HTML原生锚点定位（最简单） #

这种方式依赖浏览器原生的锚点机制，兼容性拉满，不需要额外脚本：

• 第一步：在目标页面的中间区域元素上设置唯一id，比如：

  <div id="page-middle">这里是页面中间的内容区域</div>
  

• 第二步：在跳转按钮所在页面，把按钮的跳转目标设为「目标页面地址+#锚点id」，示例代码：

  <!-- 用button标签实现 -->
  <button onclick="window.location.href='目标页面.html#page-middle'">跳转到中间区域</button>
  
  <!-- 或者用a标签模拟按钮（样式可自定义） -->
  <a href="目标页面.html#page-middle" style="display:inline-block; padding:8px 16px; background:#2563eb; color:white; text-decoration:none; border-radius:4px;">跳转到中间区域</a>
  

点击按钮后，浏览器会自动跳转到目标页面，并滚动到带有id="page-middle"的元素位置。

方法二：JavaScript自定义滚动位置（更灵活） #

如果页面中间没有固定元素，需要精准定位到页面垂直中点，或者要添加平滑滚动效果，用JS控制更合适：

场景1：目标页面可修改 #

在目标页面的脚本中添加监听逻辑：

window.addEventListener('load', function() {
  // 检查URL是否带有指定哈希标记
  if (window.location.hash === '#scroll-to-middle') {
    // 计算页面垂直中点位置
    const middlePos = document.documentElement.scrollHeight / 2 - window.innerHeight / 2;
    // 滚动到中点，behavior设为smooth开启平滑滚动
    window.scrollTo({
      top: middlePos,
      behavior: 'smooth'
    });
  }
});

然后跳转按钮的代码：

<button onclick="window.location.href='目标页面.html#scroll-to-middle'">跳转到中间区域</button>

场景2：目标页面不可修改（同域场景） #

如果无法修改目标页面代码，且两个页面属于同域，可以通过window.open打开页面后监听加载完成，再执行滚动：

<button onclick="jumpToMiddle()">跳转到中间区域</button>
<script>
function jumpToMiddle() {
  const targetPage = window.open('目标页面.html');
  targetPage.addEventListener('load', function() {
    const middlePos = targetPage.document.documentElement.scrollHeight / 2 - targetPage.innerHeight / 2;
    targetPage.scrollTo({
      top: middlePos,
      behavior: 'smooth'
    });
  });
}
</script>

注意：这种方式受浏览器弹窗拦截机制影响，且必须是同域页面才能生效。

额外注意事项 #

• 锚点方式要确保目标元素的id全局唯一，避免定位错误
• 平滑滚动的behavior: 'smooth'支持所有现代浏览器，如需兼容旧版IE，可替换为自定义滚动动画
• 如果目标页面有固定导航栏，锚点定位可能会被遮挡，可给目标元素添加padding-top或者用JS调整滚动偏移量

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