一个使用方便的用于跳转后保持滚动条位置的JS

使用方法很简单,将这下面的代码存为一个ScrollHolder.js文件,然后在网页Head中加入:
<script language="javascript" src="ScrollHolder.js"></script>



代码:

/*
* 这个脚本用于保持页面跳转前后滚动条的位置一致
* bnc.badboy
* 2009-8-24
*/

function ScrollHolder()
{
//add event to window
this.addWindowListener = function(sEventType, fnHandler) {
if (window.addEventListener) {
window.addEventListener(sEventType, fnHandler, false);
} else if (window.attachEvent) {
window.attachEvent("on" + sEventType, fnHandler);
} else {
window["on" + sEventType] = fnHandler;
}
}

//remember scrolling information when window is unloading
this.whenUnload = function()
{
var scrollTop = document.documentElement.scrollTop;
document.cookie = "scrollTop="+scrollTop;
}

//set current scroll bar the last page scroll bar position
this.whenLoad = function()
{
var scrollTop = document.cookie.match(new RegExp("(^| )scrollTop=([^;]*)(;|$)"));
if(scrollTop==null)
scrollTop = 0;
window.scrollTo(0,scrollTop[2]);
}

//run this script
this.run = function()
{
this.addWindowListener("unload", this.whenUnload);
this.addWindowListener("load", this.whenLoad);
}
}

var scrollHolder = new ScrollHolder();
scrollHolder.run();
vue H5列表页面 点击跳转看详情 返回列表页保持在当前位置 阅读详情

相关推荐

Nuxt - 页面缓存(从列表进入详情页返回后保持原来位置的搜索条件、结果数据、浏览器滚动条位置等)

Nuxt-返回上一页不刷新(从列表进入详情页返回后保持原来位置的搜索条件、结果数据、浏览器滚动条位置等),nuxt.jskeep-alive-props属性,nuxt返回上一页面不刷新数据,如何在Nuxt中使用keep-alive缓存组件,Vue-缓存页面(keepAlive),nuxtkeep-alive使用教程,nuxt进入详情页返回后保持原来位置的代码实现,nuxt进入详情页返回后保持原来位置的代码实现,nuxt中使用keepAlive实现详情页回列表页,列表页缓存并定位,在Nuxt中

🏆 前端领域优质创作者 4810

用一个JS代码实现页面刷新后保持页面滚动条的位置

   代码如下:          /*haiwa@2004-02-12*/       function   Trim(strValue)       {       return   strValue.replace(/^/s*|/s*$/g,"");       }       function   SetCookie(sName,   sValue)       {       do

梁震宇/风继续痛 1366

从零开始搭建属于自己的语音识别API服务器(ASRT开源项目)

材料准备 云服务器 (本人使用的的是阿里云服务器 Ubuntu(Linux操作系统)) 环境搭建 1. Python 3.7 话不多说直接上代码 sudo su yum -y install git yum -y install gcc yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-deve

zhi_qian的博客 5648

vue页面滑动后跳转另一个页面,返回时让页面保持在原有位置

方案选择 最近在做一个项目,首页有很多条数据,所以想要让用户在跳转到另一个页面后再返回首页时,保持在原有的高度,使用了keepAlive加上activated钩子,也会出现很多其他问题,因为首页是下拉加载数据,还有很多其他判断,修改起来比较麻烦,所以放弃了用keepAlive的方案 将要跳转的页面做成组件 选择另一个方案,将跳转的页面做成组件,这样就不存在需要保存数据等问题,当显示组件时,将组件设为fixed定位,overflow-y:scroll,这么做有2个要注意的地方 1.滑动动组件时,主页面也跟着滚

zxb89757的博客 5016

关于海康网络摄像头使用VLC或者Opencv拉流有延迟的问题

先说结论,我用VLC或者Pyhton opencv直接拉取海康网络摄像头的rtsp流,会有1-2s延时,特别明显。环境:Windows + VLC / Openc-Python。如上面文章介绍,我使用的时候遇到一处错误,需要把代码中的。海康SDK:与网页视频相比,几乎是同步的。上面说的延时,也是与摄像头网页视频相比的。ffplay 去掉缓存:延时1s左右。这两处地方改成左斜杠,才能运行。opencv拉流使用的是。多线程:延时1s左右。

yljxh的博客 4500

编译原理(东南大学)一:【编译原理期末冲刺救命笔记】速存!看完再上考场稳了!

本文详细介绍了编译原理的核心概念和流程,包括程序设计语言的分类、编译程序的各个阶段(如词法分析、语法分析、语义分析、中间代码生成、优化和目标代码生成)以及编译程序生成和构造的基础知识。文章还探讨了编译中的表格管理、出错处理和遍的概念,以及编译基础知识如高级语言、语法规则、字母表和符号串的运算。此外,文中还涉及文法与语言的关系,包括文法的概念、非终结符、终结符、产生式、推导和规约等。整体内容旨在为学习编译原理的学生提供全面的复习资料和考试准备指南。

一位搞嵌入式和前端的genius的博客 1028

路由跳转记录滚动条位置

路由跳转返回时记录滚动条位置 mounted () { let element = _this.$refs['multipleTable1'] element.$el.addEventListener('scroll', _this.handleScroll, true); } activated () { this.$nextTick(() => { setTimeout(() => { let element = this.$ref

niupiclass的博客 460

QtWebApp的使用【在Qt中搭建HTTP服务器】(一)

用Qt和QtWebApp能够实现在C++中开发HTTP Web服务器应用程序。 首先,需要先安装Qt的软件开发工具包。点此下载 其次,下载最新的QtWebApp库。点此下载 下载并解压缩QtWebApp ZIP文件。你将会看到: 如何使用QtWebApp 1)将QtWebApp.zip文件解压到文件夹中,并创建一个名为“ MyFirstWebApp”的新Qt控制台项目。然后,建立如下文件结构: 2)将以下行添加到MyFirstWebApp项目的项目文件中: QT += network include(

饭的笔记本 2万+

react记录页面的滚动条位置

从数据较多的列表页进入详情页返回时,列表页恢复原来的状态。 需求: 从一个横向纵向都有滚动条的列表页进入详情页,返回时列表页的活动条恢复到之前到位置。 难点: 1.列表用的是antd的table组件,滚动条是这个table组件的,浏览器返回时自身可以记录页面即document的滚动条,但不能记录某一个元素的滚动条。 2.数据加载,每次进去列表页时数据都会重新加载,列表的初始值都为空,表头也需要动态...

weixin_34162401的博客 5212

SIMPLIS实战:从零构建理想BUCK电路,精准计算与POP稳态分析

本文详细介绍了如何使用SIMPLIS软件从零开始构建并仿真一个理想的BUCK降压电路。通过设定关键参数、计算理想器件值,并搭建仿真模型,文章重点演示了暂态仿真以观察电路上电过程,并深入讲解了高效的POP(周期性工作点)稳态分析技术,帮助工程师快速验证设计、评估稳态性能,从而加速电源设计迭代。

weixin_29165465的博客 395

iOS远程真机之ios-minicap安装使用完全指南

minicap 是开源项目 STF 中的高速截图工具。STF利用此工具不断的传输图片信息并在web端绘制实现 以前只有Android版本,最近有新的ios版本,现在就安装过程中遇到的一些问题进行分享(ps:感谢sorccu 在issue里面给我的指点) 首先上地址:https://github.com/openstf/ios-minicap 你可以git clone或者直接下载zip包。

甫式人生 1万+

js之列表页进入详情页后返回列表页滚动条回到原来位置

列表页进入详情页后返回列表页滚动条回到原来位置,这个问题我是用的localStorage,直接张贴我的代码。 var tur=true; $(function(){ //滚动时保存滚动位置 $(".manager_con").scroll(function(){ if(tur){ setTimeout(scro,500); ...

wenxiukeke的博客 2368

31、自然语言生成中的流畅度评估

本博客探讨了自然语言生成(NLG)中流畅度评估的重要性和方法。文章详细介绍了流畅度的定义及其影响因素,包括句法结构、词汇选择、语义一致性和段落组织。同时,讨论了自动评估和人工评估两种主要方法,并以机器翻译、自动摘要和对话系统为例分析了流畅度评估的应用场景。最后,文章提出了提升流畅度的技术策略以及未来研究方向,为相关领域的研究者和开发者提供了有价值的参考。

h9j8k7l6m5n的博客 274

el-tree页面跳转记录滚动条位置

上一期记录了页面记录滚动条的位置,在做el-tree的同步滚动条位置的时候又有一种做法,在此更新,希望对大家有所帮助。 实现思路: el-tree的每一级的高度是26px,我们只要算出我们要同步的滚动的那一级层级,然后根据第几层级在乘以每一级对应的高度,然后把这个高度设置给当前页面的滚动条位置即可。 ...

慎独的博客 1000

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

lwip-2.0.3

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

vue中记录滚动条位置

但是有个缺点,页面刷新后就不记录了,但是简单高效。在点击的时候记录滚动条位置,存入本地。, 使用缓存机制来记录滚动条位置。再次进入该路由读取滚动跳位置。

老余的博客 5864

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

路由跳转中如何保留滚动位置?

Vue Router 的允许我们在路由跳转时控制滚动位置,方便地保留和恢复页面的滚动状态。通过和meta,我们可以更精细地控制某些页面的滚动行为,确保用户体验的流畅。为了避免页面加载时的滚动位置不正确,可以通过手动控制滚动位置来确保其准确性。使用 Vue Router 提供的,结合适当的滚动位置管理,可以为用户提供流畅的页面跳转体验,并保留他们在页面中的位置。喜欢记得关注,别让好内容被埋没~

2201_75863687的博客 1151

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

保持滚动条位置的问题

       也可以只针对某一个页面来设置这个属性,他的实现原理,其实是对页面的输出进行了一次封装,将整个页面放在了一个IFrame里...         src="/aspnet_client/system_web/1_1_4322/SmartNav.htm"> ... ...       有兴趣可以去研究一下SmartNav.js,我这里就不多说了,可以参考http://

Jonly的专栏 2835

vue 路由跳转记住滚动位置,返回时回到上次滚动位置

方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 { path: ‘/scrollDemo’, name: ‘scrollDemo’, meta: { keepAlive: true // 需要缓存 }, component: resolve => { require([‘../view/scrollDemo.vue’], resolve) } } 2.在App.vue中设置缓存组件 <ke

元仙僧的博客 1582

el-table 定位 跳转 至指定 行 位置,保证数据更新后位置不变

el-table数据刷新后会重新定位至表格头的位置,想要更新数据后任处于之前操作的位置,就要在操作时记录下当前表格滚动条的位置,数据更新后设置表格位置为刚才记忆的位置。 记忆上次位置: /** * @description: 获取表格滚动条位置 * @param ifMemory 有没有ifMemory决定了该函数是保存位置还是跳转位置 * @return void */ getTableScrollTop( ifMemory = false

丶扁扁的糖是扁的 的博客 8091

保持el-table表格滚动条状态

页面保持状态可以用keep-live,不用重复请求数据,但是keep-live不会保持我们查看时的状态,因此我们需要自己去手动修改。所以我们可以在离开页面的钩子函数中获取最后的滚动距离,在进入页面的钩子函数中设置一下滚动距离,这样就实现了状态保留的情况。如上图所示,当我们点击调价跳转到其他页面时,我们希望当我们返回这个页面时,滚动条位置保持在离开的位置。keep-live有两个钩子函数,deactivated(){}代表的是离开当前页面时发生的事件。activated(){}代表进入此页面时发生的事件。

weixin_67490903的博客 1818
上一篇: 一个简单易用的PHP分页类
下一篇: MYSQL日期函数
JavaNoob
博客等级 码龄19年 4粉丝 100原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值