代码描述:js刷新页面 保留滚动条位置。js刷新页面保留滚动条位置源码下载
大家知道你http协议是无状态的,当刷新网页的时候,网页之前的状态不会保留,但是在实际应用中,可能有这样的需求,就是保留原来滚动条的位置,下面就通过代码实例介绍一下如何实现此功能。 代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> *{ margin:0px; padding:0px; } #thediv{ width:20px; height:1000px; background:green; margin:0px auto; font-size:14px; color:red; text-align:center } </style> <script type="text/javascript"> window.onbeforeunload=function(){ var scrollPos; scrollPos=document.documentElement.scrollTop||document.body.scrollTop; document.cookie="scrollTop="+scrollPos; } window.onload=function(){ if(document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null){ var arr=document.cookie.match(/scrollTop=([^;]+)(;|$)/); document.documentElement.scrollTop = parseInt(arr[1]); document.body.scrollTop = parseInt(arr[1]); } } </script> </head> <body> <div id="thediv">51前端欢迎您,只有努力奋斗才会有美好的未来。</div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能