如何用js控制网页刷新后滚动条保持在原来的位置

 时间:2024-10-15 10:59:39

1、新建一个html文件,命名为test.html ,用于讲解如何用js控制网页刷新后滚动条保持在原来的位置。

如何用js控制网页刷新后滚动条保持在原来的位置

2、在test.tml页面,使用p标签创建多个段落,使页面出现滚动条,代码如下:

如何用js控制网页刷新后滚动条保持在原来的位置

3、在test.html页面的script标签内,创建一个SetCookie()函数,用于设置cookie,cookie的过期时间为一天。

如何用js控制网页刷新后滚动条保持在原来的位置

4、在test.html页面的script标签内,再创建一个GetCookie()函数,用于获得cookie的值,代码如下:

如何用js控制网页刷新后滚动条保持在原来的位置

5、在test.html页面的script标签内,再创建一个fnLoad()函数,用来在页面加载时,使用GetCookie函数分别获得“scrollLeft”和“scrollTop”记录的cookie值。代码如下:

如何用js控制网页刷新后滚动条保持在原来的位置

6、在test.html页面的script标签内,创建一个fnUnload()函数,用于在离开网页时,使用SetCookie函数分别设置名称为“scrollLeft”和“scrollTop”的cookie。代码如下:

如何用js控制网页刷新后滚动条保持在原来的位置

7、最后,使用两个方法,一个是onunload的方法,用于在离开网页时执行fnUnload()函数去设置cookie值,用于记玲膛宀耱录滚动条的scrollLeft和scrollTop位置;另一个方法是onload方法,用于再次进入网页时,执行fnLoad()函数,取得滚动条的scrollLeft和scrollTop位置,并设置滚动条的位置与上次一致。

如何用js控制网页刷新后滚动条保持在原来的位置
  • 2012六一儿童节_适合儿童旅游的景点罗列
  • 菜根有什么用
  • 安龙有什么好玩的景点
  • 咸鱼之王阵容配队
  • wifi万能钥匙怎么下载安装
  • 热门搜索
    苏u是哪里的车牌号码 磊科路由器 野菊花泡水喝的功效 羊绒围巾怎么清洗 如何判断自己前列腺炎 早上吸引朋友圈的句子 查电话号码是哪里的 保险柜密码锁怎么开 如何预防高血压 雅安在哪里