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]);
    }
}
js 实现 记录滚动条位置 js 实现 记录滚动条位置! 值得下载看看!资源免费,大家分享!! 立即下载

相关推荐

Ext grid panel 滚动条位置不变

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

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

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

业余前端的职业经历 6315

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

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

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

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

业余前端的职业经历 5362

《21天学通C++》阶段性成果测试题——hstring(手写string类)

总体考察了类的使用,缓冲区考察了指针和数组的使用、增删改查、考察编码思维、考察了类的重载。1.初始化子字符串的起始位置为-1,表示未找到,若buffer或findHstring为空,则返回-1。右边的字符串不为空,则分别获取母串和子串的长度(用循环),然后创建一个固定大小的数组。3.然后循环遍历寻找子串在母串中的起始位置,循环时可以通过两个长度相减,避免循环越界。2.如都不为空,则分别获取双方的字符串长度(用循环),然后。右边的字符串为空,则输出原来的字符串。是否为空,有一方为空则返回另一方。

立志成为炼丹师? 1265

用Python实现古诗词填字游戏(三)

古诗词做填字游戏的第三部分代码,也是最核心的部分。实现对诗文和关键字的选定,并确定文字的输出位置。

PosPro的专栏 6119

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

滚动条滚动到指定位置

weixin_47030180的博客 8507

告别重启烦恼:用WSL2让Docker和VMware在Win10上真正共存

本文详细介绍了如何在Windows 10系统上,借助WSL2实现Docker与VMware的真正共存,彻底告别以往需要反复重启切换的烦恼。通过启用Hyper-V兼容模式并进行正确配置,开发者无需重启即可同时高效运行容器和虚拟机,显著提升开发与测试工作流的连续性和效率。

salt9的博客 990

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

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

老电影故事的博客 3349

手把手教你用STM32CubeMX配置I3C通信(含动态地址分配实战)

本文提供了一份基于STM32CubeMX配置I3C通信的实战指南,重点讲解了动态地址分配的实现步骤。通过详细的工程配置、从设备枚举、CCC命令使用及数据读写示例,帮助开发者快速掌握这一高效通信协议,以替代传统的I2C或SPI接口,满足多传感器连接与低功耗设计需求。

c8d9e0f1的博客 546

Zotero内存占用与存储优化:从根源解决卡顿与空间不足

文献管理软件在学术工作中扮演着重要角色,其核心原理是通过数据库管理元数据与附件文件,实现文献的快速检索与组织。然而,随着文献库规模增长,软件的资源管理机制可能面临挑战,尤其是内存占用与存储空间优化问题。从技术价值看,高效的附件管理策略不仅能提升软件响应速度,还能确保数据安全与可移植性。在实际应用场景中,研究者常遇到软件卡顿、存储目录膨胀等痛点,这通常与附件存储模式、缓存机制及数据库维护有关。本文聚焦于Zotero这一主流工具,针对其内存占用高、文件无法删除等常见问题,提供了外置存储、链接附件、数据库维护等系

weixin_34209060的博客 475

js返回到上个页面之后,滚动条还在上次的地方

/*返回上次浏览的位置*/         $(function(){                 var str=window.location.href;                 str =str.substring(str.lastIndexOf("/")+1);                 if($.cookie(str)){                    //几秒...

qq_39493570的博客 1677

2026年7月19日 从可插拔到共封装:技术路线研究报告

AI 算力的爆发正在重写数据中心光互连的技术路线。本报告对当前并存的四代光互连架构——

weixin_51184047的博客 599

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

网口通信实战(C#完整版):基于TCP协议的工业仪表数据采集系统开发

工业现场中80%的智能仪表(压力/温度/液位/流量/数显仪表)、采集模块、测控终端均支持TCP网口通信,这类设备的TCP通信有鲜明的工业特性:基于字节流的自定义二进制协议、一问一答的主从通信模式、对数据完整性/稳定性要求极高。本次实战是纯工业级落地项目,基于C# WinForm + .NET Framework 4.8(工业上位机标配)✅纯原生无依赖:零第三方类库/控件,仅用C#原生,源码可100%复用、无引用冲突、工控机完美兼容;✅双采集模式完美适配:同时实现「单次手动采集」+「连续自动采集」

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 1804

龙芯2K1000 OTG双模驱动深度解析

是Synopsys公司开发的USB 2.0 OTG控制器IP核,龙芯2K1000内置该IP,作为唯一的OTG控制器(PCI Dev4 Func0),物理基地址0x40000000。核心能力:同时支持Host主机模式(接U盘/键盘)、Device设备模式(虚拟串口ttyGS0)、OTG双模自动切换速率驱动路径:内核源码PMON:启用otg0设备树内核:开启HOSTPERIPHERALG_SERIAL启动参数脚本:sysfs角色切换+开机自启Host按以上配置,龙芯2K1000 DWC2 OTG可完美实现。

weixin_44932366的博客 377

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

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

灿烂的博客 411

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

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

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

weixin_42477505的博客 534

计算机控制技术及应用

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

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

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

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

weixin_28863429的博客 2351

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

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

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

weixin_34293246的博客 407

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
上一篇: gulp 版本号修改
下一篇: js 实现刷新页面后回到记录时滚动条的位置
github_39051926
博客等级 码龄9年 3粉丝 36原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值