js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

前端之家收集整理的这篇文章主要介绍了js实现刷新页面后回到记录时滚动条的位置【两种方案可选】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条;每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行。如下:

第一种方案

将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下:

js代码

var _h = 0; function SetH(o) { _h = o.scrollTop SetCookie("a",_h) } window.onload = function () { document.getElementById("x").scrollTop = GetCookie("a");//页面加载时设置scrolltop高度 } function SetCookie(sName,sValue) { document.cookie = sName + "=" + escape(sValue) + "; "; } function GetCookie(sName) { var aCookie = document.cookie.split("; "); for (var i = 0; i < aCookie.length; i++) { var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0]) return unescape(aCrumb[1]); } return 0; }

html中代码如下:

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

第二种方案

1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie

2.页面加载时再读取document.cookie的值,设置给div的scrollTop

js代码实现:

html:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

猜你在找的JavaScript相关文章