WordPress页面嵌入iframe后默认聚焦中部，如何让页面默认显示顶部？

核心思路：等iframe加载完成后再触发滚动 #

你之前的代码失效确实是因为主页面JS先执行，此时iframe还未加载完成，后续iframe的加载行为会把页面带偏到中部。通过监听iframe的load事件，等它完全加载后再强制滚动到顶部就能解决问题。

方法1：jQuery实现（适合已加载jQuery的WordPress站点） #

1. 先给你的iframe添加唯一ID：

<iframe id="ice-cream-iframe" src="你的iframe地址"></iframe>

2. 在页面底部（或主题的footer.php文件中）添加代码：

$(document).ready(function() {
  $('#ice-cream-iframe').on('load', function() {
    $(window).scrollTop(0);
  });
});

方法2：原生JS实现（无需依赖jQuery） #

如果站点没加载jQuery，用原生JS更稳妥：

1. 给iframe添加唯一ID：

<iframe id="ice-cream-iframe" src="你的iframe地址"></iframe>

2. 添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const targetIframe = document.getElementById('ice-cream-iframe');
  targetIframe.addEventListener('load', function() {
    window.scrollTo(0, 0);
  });
});

特殊情况：跨域iframe的兜底处理 #

如果iframe和主页面域名不同（跨域），可在上述基础上加个延迟兜底，防止加载事件监听失效：

$(document).ready(function() {
  $('#ice-cream-iframe').on('load', function() {
    $(window).scrollTop(0);
  });
  // 3秒后强制滚动一次，做兜底处理
  setTimeout(function() {
    $(window).scrollTop(0);
  }, 3000);
});

额外排查点 #

• 检查iframe内部页面是否有自动聚焦的元素（比如输入框）或锚点链接，这些也会导致主页面滚动。如果是同域iframe，可在iframe内部页面的DOMContentLoaded事件里添加window.parent.scrollTo(0,0);。
• 在WordPress中添加自定义JS时，优先通过主题自定义功能（如「外观-自定义-额外JS」）或修改footer.php，避免直接在编辑器添加导致代码被过滤。

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