多个iframe切换时，如何保持每个iframe的滚动位置

[夕山雨]

<button id="click1">百度</button>
<button id="click2">搜狐</button><br/>
<iframe id="iframe1" src="../echarts/barChart.html" style="height:500px;width:800px;display:block;"></iframe>
<iframe id="iframe2" src="../echarts/lineChart.html" style="height:500px;width:800px;display:none;"></iframe>
$("#click1").click(function(){
$('#iframe2').css("display","none");
$('#iframe1').css("display","block");
}
$("#click2").click(function(){
$('#iframe1').css("display","none");
$('#iframe2').css("display","block")；
});
现在有这样一段小代码，进入页面时显示的是iframe1（两个页面都是自己手写的简单页面），然后将该页面滚动，接着切换到iframe2，这时如果再次点击按钮回到iframe1时发现iframe1的滚动条置顶了，而不是停留在之前的滚动位置，但是如果iframe分别引用的是百度和搜狐的链接就不会发生这种现象。这是什么原因呢，如何在切换回iframe1的时候保持原来的滚动位置呢？

[田小瘦]

每次都保留前一个iframe的滚动条的位置,可以去搜一下scrolltop方法, 再下次进入的时候再设置成保存的位置

[丰云]

既然用jquery，就好好用的，不要不伦不类的。。。。
$('#iframe2').hide()；
$('#iframe2').show()；

[夕山雨]

当从iframe1切换到iframe2时，在iframe1中会自动触发一个滚动到顶部的事件，所以scrollTop会被置零，这样就记录不了之前的scrollTop值了

[彩舒]

点击的时候用全局变量记录scrollTop，然后下次显示的时候重新设置iframe的scrollTop

[夕山雨]

这个方法我试过，但是iframe1自动滚动到顶部的事件是在click之前发生的，所以在点击事件里去设置全局变量的话，已经拿不到之前的滚动位置了。目前我的方法是给每一个iframe添加scroll监听事件，如果scrollTop值不为零就赋值给全局变量，不过感觉有点呆。。。

[qq_43367922]

你换成visibility就行了

[scscms太阳光]

display=none会造成页面重新渲染，当display=block时页面会重新加载，scrollTop就一直为0
其实你完全可以使用visibility=visible｜hidden或者opacity＝0｜1来切换iframe就没问题了。

[winzond]

请问楼主，二楼没解决问题吗？我也即将进入这个阶段，还请告知，谢谢

[DerrickDai1988]

设置iframe的高度固定，scrolling="no"。在iframe里面嵌套一层DIV，设置DIV的高度固定，overflow:auto。
切换iframe只会导致iframe的scrolltop为0，但不会导致DIV的scrolltop为0.
完美解决问题。

[夕山雨]

iframe中嵌套的div并不会成为子页面的容器，而是作为字符串被添加到了子页面的后面，所以该方案不能解决问题。 设置visibility确实能保持滚动位置，但是各个iframe可能需要重新定一下位，使用绝对定位使各个iframe重叠。