JS实现刷新网页后之前浏览位置保持不变示例详解


Posted in Javascript onAugust 14, 2022

正文

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

JS实现刷新网页后之前浏览位置保持不变示例详解

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

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

这个是使用滚动条属性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刷新网页浏览位置保持的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
Vue深入理解插槽slot的使用
Aug 05 #Vue.js
React如何使用axios请求数据并把数据渲染到组件
Aug 05 #Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 #Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 #Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 #Javascript
pnpm对npm及yarn降维打击详解
Aug 05 #Javascript
You might like
PHP 金额数字转换成英文
2010/05/06 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
详解Python迭代和迭代器
2016/03/28 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
京东国际站:JOYBUY
2017/11/23 全球购物
J2EE面试题大全
2016/08/06 面试题
汉语专业应届生求职信
2013/10/01 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫