js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
当div中绑定数据，给它一个属性overflow-y:scroll，添加长度大小，使其能够出现滚动条；每次刷新的时候滚动条总是会出现在最上方，这使我很头疼，经过查阅网上资料，返现两种方法可行。如下：
第一种方案
将上一个页面的div的scrolltop距离长度记录在cookie中，然后通过js调整刷新页面时的长度记录，代码如下：
js代码：
<script>
var_h=0;
functionSetH(o){
_h=o.scrollTop
SetCookie("a",_h)
}
window.onload=function(){
document.getElementById("x").scrollTop=GetCookie("a");//页面加载时设置scrolltop高度
}
functionSetCookie(sName,sValue){
document.cookie=sName+"="+escape(sValue)+";";
}
functionGetCookie(sName){
varaCookie=document.cookie.split(";");
for(vari=0;i<aCookie.length;i++){
varaCrumb=aCookie[i].split("=");
if(sName==aCrumb[0])
returnunescape(aCrumb[1]);
}
return0;
}
</script>
html中代码如下：
<divid="x"style="height:200px;overflow:scroll"onscroll="SetH(this)"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </div>
第二种方案
1.通过div的onscroll事件记录滚动条的scrollTop值，设置到document.cookie
2.页面加载时再读取document.cookie的值，设置给div的scrollTop
js代码实现：
<scripttype="text/javascript">
functionKeepScrollBar(){
varscrollPos;
if(typeofwindow.pageYOffset!='undefined'){
scrollPos=window.pageYOffset;
}
elseif(typeofdocument.body!='undefined'){
scrollPos=document.getElementById('divContent').scrollTop;
}
document.cookie="scrollTop="+scrollPos;
}
window.onload=function(){
if(document.cookie.match(/scrollTop=([^;]+)(;|$)/)!=null){
vararr=document.cookie.match(/scrollTop=([^;]+)(;|$)/);
document.getElementById('divContent').scrollTop=parseInt(arr[1]);
}
}
</script>
html:
<divclass="content"data-role="tab-content"data-id="course-a"runat="server"id="divContent"style="height:365px;overflow-y:scroll"onscroll="KeepScrollBar()"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> </div>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！