1.前言
在前端开发中，我们的网页有时会嵌套一个iframe子页面，这时候在父页面定义的回到顶部按钮就需要控制父、子两个页面同时回到顶部。
2.实现方法
1）定义iframe及回到顶部按钮
1 <button id="returnTop" type="button">回到顶部</button>
2 <iframe id="myIframe" name="iframe" src="test.html" ></iframe>
2）js代码（使用jquery实现）
1 // 返回顶部
2 $("#returnTop").click(function () { 3 //滑动的速度
4 var speed = 200; 5 //父页面回到顶部
6 $('body,html').animate({scrollTop: 0}, speed); 7 //iframe页面回到顶部
8 var iframe = window.frames["iframe"]; 9 iframe.$('html, body').animate({scrollTop: 0}, speed); 10 });
3.其他方法
在iframe页面中自定义一个方法，然后在父页面调用该方法也可以实现相关操作（如果要实现回到顶部功能的话，需要在每个子页面都定义方法，不推荐）
1 //父页面调用
2 $("#returnTop").click(function(){ 3 var iframe = window.frames["iframe"]; 4 if (iframe != null && iframe != undefined) { 5 iframe.iframeFunc(); 6 } 7 return false; 8 })
1 //子页面自定义方法
2 function iframeFunc(){ 3 alert("我是子页面中的方法"); 4 }
*补充：强制刷新iframe页面
$("#myIframe").attr("src",$("#myIframe").attr("src"));
*注：当iframe的src后附带锚点值时（如：src="test.html#param1"），改变“#”号后的内容，iframe页面不会刷新；
而如果是“?”号附带参数的形式（如：src="test.html?id=1001"），改变“?”后参数内容，iframe页面会刷新。