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之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
详解JavaScript函数
Dec 01 Javascript
javascript基本算法汇总
Mar 09 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
vue.js todolist实现代码
2017/10/29 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python实现简单ftp客户端的方法
2015/06/28 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python目录和文件处理总结详解
2019/09/02 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
体育课外活动总结
2014/07/08 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
联谊活动总结范文
2015/05/09 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers