如何实现点击按钮跳转至带#ID的HREF链接？

为什么包裹按钮会失效？ #

最常见的原因是：如果按钮在表单内，它默认是type="submit"，点击后会触发表单提交，覆盖了a标签的跳转行为；另外部分UI框架的按钮组件可能自带阻止默认事件的逻辑，也会导致跳转失效。

下面是几种可行的解决方法：

方法1：给按钮绑定点击事件手动跳转 #

这是最直接的方案，不受表单或组件默认行为影响：

<!-- 内联事件写法 -->
<button onclick="window.location.hash = 'target-section'">跳转到目标区域</button>

<!-- 目标锚点 -->
<section id="target-section">这里是你要跳转到的内容</section>

如果追求代码解耦，用事件监听的方式：

<button id="jump-button">跳转到目标区域</button>
<section id="target-section">这里是你要跳转到的内容</section>

<script>
document.getElementById('jump-button').addEventListener('click', () => {
  // 方式1：修改hash值跳转
  window.location.hash = 'target-section';
  
  // 方式2：用scrollIntoView实现平滑滚动（体验更好）
  // document.getElementById('target-section').scrollIntoView({ behavior: 'smooth' });
});
</script>

方法2：修正包裹按钮的写法 #

如果你坚持用a标签包裹，只需给按钮添加type="button"属性，避免它触发表单提交：

<!-- 普通场景 -->
<a href="#target-section">
  <button>跳转到目标区域</button>
</a>

<!-- 表单内的场景 -->
<form>
  <a href="#target-section">
    <button type="button">跳转到目标区域</button>
  </a>
</form>

方法3：用a标签模拟按钮样式 #

完全舍弃button标签，把a标签改成按钮的外观，这样跳转逻辑更纯粹：

<a href="#target-section" class="button-link">跳转到目标区域</a>
<section id="target-section">这里是你要跳转到的内容</section>

<style>
.button-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f9fa;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
}
.button-link:hover {
  background-color: #e9ecef;
}
</style>

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