如何用JS实现网页刷新后保留浏览位置的功能示例解析？

本文共计639个文字，预计阅读时间需要3分钟。

目录+正文+这里有两种方法+方法一：这个比较集中+方法二：cookie存储各封装成函数+正文+在京东上浏览的时候，发现了一个比较人性化的小功能+浏览商品到一半的时候，如图+

目录

• 正文
• 这里有两个方法
• 方法一：这个比较集中
• 方法二：cookie存取各封装成函数

正文

在京东上浏览的时候，发现了一个比较人性化的小功能，浏览商品，浏览到一半的时候，如下图所示：

我重新加载网页，刷新之后，滚动条依然定位在我刚刚浏览的位置，这个小功能感觉还不错，挺方便的。

具体是怎么实现的呢，去网上大概查了一下。

这个是使用滚动条属性scrollTop来实现的。

基本实现流程：滚动条移动的时候，将滚动条实时的位置存入Cookie或者localstorage中，但是一些老旧的浏览器版本对localstorage支持不是特别友好。

如果你想使用localstorage来实现，请参照《VUE自学笔记之使用localstorage和sessionstorage实现登录》

我这里使用的是cookie来存储。