如何让HTML Anchor锚点链接同时实现两种不同的功能？

原代码问题说明 #

你原来的写法存在两个核心问题：

• 给a标签加了target="_blank"，会导致href指向的锚点跳转在新标签页执行，无法在当前页完成锚点定位
• onclick事件中重复调用两次window.open，不符合只开一个外部链接的需求

最简实现方案 #

直接用a标签的原生href属性承载当前页锚点定位逻辑，onclick事件仅负责打开外部链接即可：

<!-- 当前页需要先存在对应锚点元素 -->
<div id="test">锚点目标位置</div>

<!-- 点击触发两个操作的链接 -->
<a href="#test" onclick="window.open('你的外部链接地址')">TEST</a>

原理说明 #

• href填写当前页锚点哈希值（格式为#元素id），浏览器默认行为会自动在当前页滚动到对应id的元素位置，适配所有浏览器的原生锚点特性，还会自动将锚点记录到浏览历史中
• 不需要加target="_blank"，避免锚点跳转被放到新标签页执行
• onclick仅执行一次window.open，默认在新标签页打开外部链接，不会干扰原生锚点定位行为

语义化优化写法（推荐） #

如果不想用内联事件，可以把逻辑和结构分离，更便于后期维护：

<div id="test">锚点目标位置</div>
<a href="#test" class="double-action-link">TEST</a>

<script>
document.querySelector('.double-action-link').addEventListener('click', function() {
  window.open('你的外部链接地址')
})
</script>

带自定义滚动效果的进阶写法 #

如果需要控制锚点定位的动画、偏移量等，可以自定义滚动逻辑：

<div id="test">锚点目标位置</div>
<a href="javascript:void(0)" class="double-action-link">TEST</a>

<script>
document.querySelector('.double-action-link').addEventListener('click', function() {
  // 新标签页打开外部链接
  window.open('你的外部链接地址')
  // 自定义平滑滚动到锚点位置
  document.getElementById('test').scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  })
})
</script>

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