一般需要两个页面来实现，比如使用frame或者iframe，假设页面a中嵌有iframe，页面为b，你要实现iframe中的页面刷新后滚动条回到原来的位置，可以这样干：
1、在a页面中，新建个变量用于记录b页面的滚动条位置
var hScrollBarPos=0;
2、在b中写函数
<script type="text/javascript">
//向父页a传递滚动条位置，用于刷新时能够回复到原来位置
function sendScrollPos(){
parenthScrollBarPos=documentbodyscrollTop;
}
//下面这句b页面每次加载都会执行
windowscrollTo(0,parenttoolBarFramehScrollBarPos);
</script>
onload=function(){
var changeBG=0,scrollTop=0;
//设置原始变量
setInterval(function(){
scrollTop=documentbodyscrollTop
if(changeBG&&scrollTop>200){
//判断是否更换了背景及滚动条是否到达指定高度
documentbodyscrollTop=0; //转到页面顶部
documentbodystylebackgroundImage="url()";
//变换背景
changeBG=1;
//表示已经转换了背景
setTimeout(function(){
documentbodyscrollTop=changeBG
//返回原来位置
},1000)
}
},1000)
}
滚动条，顾名思义，就是可以滚动的条（ScrollBar）。准确地说，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。
说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？
如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是<body></body>或者<html></html>节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？
刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？
看到滚动条的控制可以通过CSS的overflow的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？
<html>
02
<head>
03
<title></title>
04
<style type="text/css">
05
06
html,body {
07
overflow:hidden;
08
margin:0px;
09
width:100%;
10
height:100%;
11
}
12
13
virtual_body {
14
width:100%;
15
height:100%;
16
overflow-y:scroll;
17
overflow-x:auto;
18
}
19
20
fixed_div {
21
position:absolute;
22
z-index:2008;
23
bottom:20px;
24
left:40px;
25
width:800px;
26
height:40px;
27
border:1px solid red;
28
background:#e5e5e5;
29
}
30
</style>
31
</head>
32
33
<body>
34
<div class="fixed_div">I am still here!</div>
35
<div class="virtual_body">
36
<div style="height:888px;">
37
I am content !
38
</div>
39
</div>
40
</body>
41
</html>
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
以上就是关于如何用js控制网页刷新后滚动条保持在原来的位置全部的内容，包括:如何用js控制网页刷新后滚动条保持在原来的位置、js如何判断滚动条位置，并更换背景、js 如何让滚动条自动定位到页面一半的位置，不要误差等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）