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頁面會刷新。