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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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执行速度全攻略(上)
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
smarty表格换行实例
2014/12/15 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP实现简易图形计算器
2020/08/28 PHP
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python requests上传文件实现步骤
2020/09/15 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
解除劳动合同协议书
2014/04/14 职场文书
禁止酒驾标语
2014/06/25 职场文书
百日安全生产活动总结
2014/07/05 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
二胎满月酒致辞
2015/07/29 职场文书
《牧场之国》教学反思
2016/02/22 职场文书