本文介绍如何让嵌入在 iframe 中的网页在加载完成后自动平滑滚动至页面底部，适用于数字标牌、信息展示屏等无需交互的场景。
在实际应用中（如展厅大屏、会议室信息看板），常需将外部网页嵌入 iframe 并实现“开机即播、自动滚动”的效果。关键在于：目标页面自身需主动触发滚动行为，而非由父页面控制 iframe 内容（因跨域限制及 iframe 安全策略，父页通常无法直接操作子页面 DOM）。
✅ 推荐方案：在目标页面末尾注入滚动脚本
确保被嵌入的 HTML 页面（即 iframe 的 src 指向的页面）在加载完成时执行平滑滚动到底部的操作。使用现代浏览器支持的 window.scrollTo() 方法，并指定 behavior: "smooth" 实现流畅动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动滚动页面</title>
</head>
<body>
<!-- 示例长内容 -->
<p>页面内容...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版"><img
src="https://img.php.cn/upload/webcode/000/000/000/5a2b9a88e20e5831.png" alt="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版">动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版</a>
<p>动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包</p>
</div>
<a href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>页面内容...</p>
<!-- 此处省略多行重复内容，实际请填充足够高度以产生滚动条 -->
<p>页面内容...</p>
<!-- 滚动脚本必须放在 body 底部或使用 DOMContentLoaded 保障执行时机 -->
<script>
// 等待 DOM 加载完成，再滚动到底部
document.addEventListener('DOMContentLoaded', () => {
window.scrollTo({
left: 0,
top: document.body.scrollHeight,
behavior: 'smooth'
});
});
</script>
</body>
</html>⚠️ 注意事项：务必将 放在 之前，或使用 DOMContentLoaded 事件监听，避免因 DOM 未就绪导致 scrollHeight 获取为 0；若页面含动态加载内容（如 AJAX 渲染、图片懒加载），需在所有内容渲染完毕后再调用 scrollTo，可结合 window.onload 或自定义渲染完成钩子；scrollHeight 返回的是整个文档高度（含溢出部分），适用于垂直滚动到底；若需水平滚动，可改用 scrollWidth；不建议使用 setInterval 或 setTimeout 模拟滚动，既不精准又增加维护成本。
? 补充：如需循环滚动（回到顶部后重滚）
可在滚动结束后延迟跳转回顶部并再次触发，形成循环效果（适用于信息轮播）：
document.addEventListener('DOMContentLoaded', () => {
const scrollToBottom = () => {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
});
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
// 首次滚动到底部
scrollToBottom();
// 底部停留2秒后返回顶部，再延时1秒重新滚动（可根据需求调整）
setTimeout(() => {
scrollToTop();
setTimeout(scrollToBottom, 1000);
}, 2000);
});该方案轻量、兼容性好（Chrome 61+、Firefox 68+、Safari 15.4+ 均支持 smooth 行为），且完全由目标页面自主控制，规避跨域与 iframe 权限问题，是数字展示类场景的理想实践。
