本文详解如何在网页刷新后保持用户之前的浏览位置。通过监听滚动事件，将scrollTop值存入Cookie或localStorage。文章提供了两种代码实现方案：一种是集中处理滚动逻辑，另一种是将Cookie存取封装为独立函数，确保兼容老旧浏览器并提高代码灵活性。
正文
在京东浏览商品时，观察到一个便捷的功能：当用户浏览到页面中间位置时，如下图所示：
重新加载或刷新网页后，滚动条会自动定位回之前浏览的位置，这一体验非常实用。
该功能的具体实现原理，经查阅相关资料得知。
其核心机制是利用滚动条的scrollTop属性。
基本实现逻辑是：在滚动条移动过程中，实时获取当前滚动位置，并将其存储到Cookie或localStorage中。需要注意的是，部分老旧浏览器版本对localStorage的支持可能不够完善。
若希望使用localStorage实现此功能，可参考《VUE自学笔记之使用localstorage和sessionstorage实现登录》一文。
本文示例采用Cookie进行数据存储。
这里介绍两种具体的实现方法。
方法一：代码逻辑相对集中。
/**
* @name: 控制 浏览器滚动条
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2022-01-10
*/
window.onscroll = function() {
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
document.cookie = "scrollTop=" + scrollPos;
}
window.onload = function (){
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/);
document.body.scrollTop = parseInt(arr[1]);
}
}
方法二：将Cookie的读取与写入分别封装为独立函数。
第二种方式将Cookie的存取操作封装成独立函数，使得调用更加灵活方便。
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
SetCookie("a", scrollTop);
}
window.onload = function () {
document.body.scrollTop = GetCookie("a");//页面加载时设置scrolltop高度
}
/**
* @name: 设置cookie
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2022-01-10
*/
function SetCookie(sName, sValue) {
document.cookie = sName + "=" + escape(sValue) + "; ";
}
/**
* @name: 读取cookie
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2022-01-10
*/
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;
}
本质上，这只是一个对Cookie进行存储与取值，并结合scrollTop赋值的过程，实现难度不大。
上述两段代码，一般情况下直接嵌入项目中即可正常运行。
若遇到无法生效的情况，请检查项目中其他代码是否对scrollTop属性进行了覆盖赋值。
以上就是JS实现刷新网页后之前浏览位置保持不变示例详解的详细内容，更多关于JS刷新网页浏览位置保持的资料请关注本站其它相关文章！