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 Event学习补遗 addEventSimple
Feb 11 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
webpack构建react多页面应用详解
Sep 15 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue自定义filters过滤器
2018/04/26 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
个人党性剖析材料
2014/02/03 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
课外科技活动总结
2014/08/27 职场文书
教书育人演讲稿
2014/09/11 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android