如何阻止点击链接后 iframe 触发页面自动滚动到顶部-html教程-PHP中文网

如何阻止点击链接后 iframe 触发页面自动滚动到顶部

当使用带 href="#id" 的链接控制 iframe 显示时，浏览器默认会跳转至对应 ID 元素位置，导致页面意外滚动；只需在点击事件中调用 event.preventDefault() 即可阻止该行为。

当使用带 `href="#id"` 的链接控制 iframe 显示时，浏览器默认会跳转至对应 id 元素位置，导致页面意外 scrolling；只需在点击事件中调用 `event.preventdefault()` 即可阻止该行为。

这个问题非常典型——尤其对刚接触 HTML 交互的新手而言：你用 <a href="#izanagisBurden"></a> 这类锚点链接触发 JavaScript 函数显示 iframe，但页面却“猛地”滚到 iframe 所在位置。根本原因在于：<a href="#xxx"></a> 点击时，浏览器不仅执行 onclick，还会默认执行锚点跳转（即滚动到 id="xxx" 的元素）。即使该元素初始是 display: none，只要它存在于 DOM 中，浏览器仍会尝试滚动到其位置（通常表现为滚动到页面顶部或不可见区域）。

✅ 正确解法是在每个点击函数中阻止默认行为：

Izanagi's Burden.

并修改 JavaScript 函数，接收 event 参数并调用 preventDefault()：

function clickMe(event) {
  event.preventDefault(); // ? 关键：阻止 href="#izanagisBurden" 的默认跳转行为
  document.getElementById('izanagisBurden').src = "https://www.light.gg/db/items/3211806999/izanagis-burden/";
  document.getElementById('izanagisBurden').style.display = 'block';
  document.getElementById('forbearance').style.display = 'none';
  document.getElementById('theLament').style.display = 'none';
}

function clickMe2(event) {
  event.preventDefault(); // 同样适用于其他链接
  document.getElementById('forbearance').src = "https://www.light.gg/db/items/613334176/forbearance/";
  document.getElementById('forbearance').style.display = 'block';
  document.getElementById('izanagisBurden').style.display = 'none';
  document.getElementById('theLament').style.display = 'none';
}

function clickMe3(event) {
  event.preventDefault();
  document.getElementById('theLament').src = "https://www.light.gg/db/items/3487253372/the-lament/";
  document.getElementById('theLament').style.display = 'block';
  document.getElementById('forbearance').style.display = 'none';
  document.getElementById('izanagisBurden').style.display = 'none';
}

⚠️ 注意事项：

event.preventDefault() 必须在函数开头调用，确保在任何 DOM 操作前就阻断默认跳转；
不要省略 onclick="clickMe(event)" 中的 event —— 这是将原生事件对象传入函数的必要写法；
href="#" 或 href="#some-id" 都会触发跳转，因此所有类似链接都需加 preventDefault()；
替代方案（进阶）：可直接移除 href 属性，改用 role="button" + CSS 样式模拟链接外观，语义更清晰且无跳转风险，例如：
```
<a class="kinetic" role="button" tabindex="0" onclick="clickMe(event)">Izanagi's Burden.</a>
```