js 实现刷新页面后回到记录时滚动条的位置

vue单页设置页面不刷新 记录滚动条的位置 功能需求 点击第三级分类节点进入商品列表,然后,点击左上方返回按钮,此时页面重新回到了第一个一级分类节点展开的效果。应该改成,返回到当前的一级分类节点下的三级分类节点 vue单页 使用keep-alive页面返回不刷新 法1:设置所有页面进入分类页时都缓存(已试过成功) 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 1.在配置router的文件中设置分类页的keepAlive为true 2.将app.vue文件设置为 <template> <div 阅读详情
window.onbeforeunload = function () {
    var scrollPos;
    if (typeof window.pageYOffset != 'undefined') {
        scrollPos = window.pageYOffset;
    }
    else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement.scrollTop;
    }
    else if (typeof document.body != 'undefined') {
        scrollPos = document.body.scrollTop;
    }
    document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中  
}


window.onload = function () {
    if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
        var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空,则读取滚动条位置  
        document.documentElement.scrollTop = parseInt(arr[1]);
        document.body.scrollTop = parseInt(arr[1]);
    }
}
vue router keepAlive的页面 到此页面根据不同条件判断是否刷新 不刷新时记录滚动条位置 需求 A—>B—>C,A页面到B页面时,B页面刷新请求数据,从C页面返回到B页面时则不刷新,需要回到原来选中滚动的地方 比如:淘宝的商品列表(B)页面跳转到详情页(C)的时候,当返回上一级的商品列表时,肯定是返回上次浏览的位置,不然用户体验很差,使用了keep-alive之后呢页面不刷新了,随之的问题就是查找特定商品列表(A—>B)时,列表一直是上次缓存的列表页。 解决办法 首先,在app.vue中使用keepAlive,如果是meta信息里keepAlive为true,那就包在keep- 阅读详情

相关推荐

js 实现 记录滚动条位置

js 实现 记录滚动条位置! 值得下载看看!资源免费,大家分享!!

js实现刷新页面,实现滚动条还停留在上次访问的位置,同时用户在列表页进入详情之后,回来还在之前的浏览位置

其实不管是第一个还是第二个,核心都是 记住上一次浏览的位置,记住滚动条所处的位置 不过第一种情况有一个 快捷的处理方式 就是 // 当页面刷新之后 重新回到上次滚动条 所处的位置 window.scrollTop(0, 0); 还有第二种情况就是 我们从当前页面跳走的时候,点击返回的时候 还希望是上次访问的位置 这个时候 就需要 使用 cookie 或者 本地缓存 用来缓存那个滚动的位置了 // 滚动到 上次访问位置 const scrollToView = () => { l

业余前端的职业经历 6315

Ext grid panel 滚动条位置不变

Ext grid panel 滚动条位置不变,适用于实时数据的刷新

前端页面滚动到某个位置的方式

1.通过a标签滚动到对应锚点 <a href="#target">点我滚动到目标</a> <div id="target">我是目标我是目标</div> <!-- 注:这样会在地址栏中加上hash值 #target --> 2.通过window.scrollTo方法滚动 //scrollTo两个参数分别表示显示的x y坐标位置 //document.documentElement.scrollHeight 获取的是整个文档的高度 //滚动

老电影故事的博客 3349

js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

本文主要介绍了页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置的两种方案,需要的朋友可以看下

Hypack 应用于地形测量的高级设置操作要领

Hypack 是业界公认最好的水文导航测量软件,是目前世界上应用广泛的专业测量疏浚软件。它能够接收,处理,存储和输出各种数据。Hypack支持绝大部分GPS,测深仪(国内如海鹰HY1603单波束测沙仪),多波束测深仪,旁扫声纳,涌浪补偿器,水位仪,验潮仪以及声速剖面仪。利用 Hypack 可以进行导航,单波束测量,多波束测量,旁扫测量以及疏浚实时监测等。软件界面友好,使用方便。本文简要阐述Hypack 应用于地形测量的几个重要操作要领。

中游鱼的博客 2801

前端滚动条滚动到指定位置

滚动条滚动到指定位置

weixin_47030180的博客 8507

使用 ChatGPT/Copilot 提升前端开发效率的 N 种方式

typescript// 输入:根据这个 JavaScript 对象,生成完整的 TypeScript 类型定义id: '123',stock: 50,},// ChatGPT 生成:id: string;discount?: number;// 可选属性// 只读属性// 更进一步,生成 Zod schema 用于运行时验证:});}),});AI 代码助手真正的革命性不在于它能生成多少代码,而在于它改变了我们解决问题的方式。

fineday 1594

前端实现 页面滚动到一定位置,元素浮动在固定位置上, 滚动定位

先来看下效果哈, 实际上这样的效果还是不少的,就是 用户进入页面的时候可能是正常的流式布局, 但滚动往下的时候有些元素就固定在某个位置。 1. 通过粘性定位实现 其实在布局中有一个 定位就是 粘性定位 sticky 可以实现这个样式 关于粘性定位的概念 我就不在这里一一赘述了 因为之前我有两篇博客进行讲解过了 https://blog.youkuaiyun.com/yunchong_zhao/article/details/114025173 https://blog.youkuaiyun.com/yunchong_zhao/

业余前端的职业经历 5362

论文阅读——Bayesian Knowledge Fusion(贝叶斯知识融合)

该篇论文解决了不确定环境中的信息融合问题。想象一下,有多位专家针对同一情况构建概率模型,我们希望汇总他们提供的信息。直接合并每个信息可能会遇到几个问题。例如,专家们可能不同意某个事件发生的概率,或者他们可能不同意两个事件之间因果关系的方向(例如,一个人认为 A 导致 B,而另一个人认为 B 导致 A)。他们甚至可能不同意概率网络中一组变量之间的整个依赖结构。

qq_64164071的博客 1497

RealSense D455启动教程

RealSense D455启动教程 修改rs_camera.launch

每天进步一点点 2419

js实现刷新页面后回到记录时滚动条的位置

局部刷新后,要求滚动条在原下拉时的位置: 1、将页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下 &lt;div id="x" style="height: 200px; overflow: scroll" onscroll="SetH(this)"&gt; &lt;/div&gt; &lt;script&gt; var _h =..

FORLOVEHUAN的博客 2838

VSLAM框架对比

格VSLAM特点介绍: (一)ORB-SLAM2 (二)ORB-SLAM3 (三)LSD-SLAM (四)

ljtx200888的博客 2295

JS实现刷新页面后回到记录时滚动条的位置

window.onbeforeunload = function () { var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'

灿烂的博客 411

用AT7456E给监控摄像头加OSD?5步搞定时间水印和Logo叠加

本文详细解析了如何使用AT7456E视频字符叠加芯片为监控系统添加专业级OSD功能,涵盖硬件设计、字符库编程和系统集成等关键步骤。通过5步操作实现时间水印和Logo叠加,提升监控系统的可用性和专业性,特别适合安防和工业视觉应用。

sea99的博客 1015

人形机器人硬件开发:骨架系统设计全攻略

本文以人形机器人骨架系统为核心研究对象,系统解析其从理论建模到工程实现的全流程设计方法。通过融合刚体力学、材料科学与机器人控制理论,构建"概念基础-理论框架-架构设计-实现机制-实际应用-高级考量-综合拓展"的七层分析体系。重点覆盖运动学/动力学建模、轻量化结构设计、关节模块集成、多物理场耦合优化等关键技术,结合波士顿动力Atlas、本田ASIMO等经典案例,提供从原型设计到量产验证的工程实践指南。

AI天才研究院 1879

html页面刷新瞬间有滚动条,页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置...

当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条;每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行。如下:第一种方案将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下:js代码: var _h = 0; func...

weixin_42477505的博客 534

【企业智能体开发】优化模型成本、延迟与失败降级

小林的培训快开始时,服务台花很久“思考最优回答”,体验并不会更好。反过来,为了省钱而始终选最轻的模型,若连房间、连接方式和任务状态都识别不稳,后续错误检索和重复建单会造成更大代价。企业 Agent 的优化对象不是单次模型调用价格,而是任务在可接受时间内、安全地推进到正确结果的总成本。

Mr数据杨 895

html刷新页面保持原来位置,js实现刷新页面后回到记录时滚动条的位置【两种方案可选】...

当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条;每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行。如下:第一种方案将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下:js代码:var _h = 0;function SetH(o) {_h...

weixin_28863429的博客 2351

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置

  当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条;每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行。如下:第一种方案  将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下:js代码:<script>...

weixin_34293246的博客 407

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

html页面刷新瞬间有滚动条,js实现刷新页面后回到记录时滚动条的位置【两种方案可选】...

当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条;每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行。如下:第一种方案将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下:js代码:var _h = 0;function SetH(o) {_h...

weixin_33614878的博客 553

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

写了个WEB中记录滚动条位置的脚本

  Web中难免遇到一些难解决的问题,有些客户就有些变态的要求,刷新后页面继续保持在原来的位置就是一个不好解决的问题.  利用js的cookie写了个脚本,基本上能实现刷新后位置保留 脚本代码如下:     将此脚本插入到网页中即可,网页尽量长,刷新后即可看到效果!script language="javascript">        function SetCookie(s

Nbboy_net的专栏 966
上一篇: js 实现刷新页面后回到记录时滚动条的位置
下一篇: css解决文字单行两端对齐(兼容ie7)
github_39051926
博客等级 码龄9年 3粉丝 36原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值