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 相关文章推荐
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
vue的mixins属性详解
Mar 14 Javascript
分析javascript原型及原型链
Mar 18 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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 session和cookie使用说明
2010/04/07 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
实例讲解php数据访问
2016/05/09 PHP
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python交易记录整合交易类详解
2019/07/03 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
办护照工作证明范本
2014/01/14 职场文书
环保倡议书
2014/04/14 职场文书
党委班子剖析材料
2014/08/21 职场文书
教师网络培训心得体会
2016/01/09 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python
nginx七层负载均衡配置详解
2022/07/15 Servers
详解MySQL的内连接和外连接
2023/05/08 MySQL