JavaScript记录滚动条位置 实例 （cookie） 转自51js

最新推荐文章于 2022-10-01 17:12:27 发布
最新推荐文章于 2022-10-01 17:12:27 发布
阅读量848 收藏
点赞数
分类专栏： javascript 文章标签： javascript function date cookies html pair

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 记录滚动条位置 </TITLE>

<script language="javascript">
    <!--
function SetCookie(sName, sValue)
{
   date = new Date();
   s = date.getDate();
   date.setDate(s+1);    //expire time is one month late!, and can't be current date!
   document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString();
}
function GetCookie(sName)
{
   // cookies are separated by semicolons
   var aCookie = document.cookie.split("; ");
   for (var i=0; i < aCookie.length; i++)
   {
   // a name/value pair (a crumb) is separated by an equal sign
   var aCrumb = aCookie[i].split("=");
   if (sName == aCrumb[0]) {
    return unescape(aCrumb[1]);}
   }
  
   // a cookie with the requested name does not exist
   return null;
}

function fnLoad()
{
   document.body.scrollLeft = GetCookie("scrollLeft");
   document.body.scrollTop = GetCookie("scrollTop");
}

function fnUnload()
{
   SetCookie("scrollLeft", document.body.scrollLeft)
   SetCookie("scrollTop", document.body.scrollTop)
}

window.onload = fnLoad;
window.onunload = fnUnload;

    // -->
</script>
</HEAD>

<BODY>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
dd<p></p>
</BODY>
</HTML>


cangyingaoyou
关注
专栏目录
JavaScript 动态渲染页面爬取(二) —— 基于 Splash
Amo Xiang的博客
12-15 3056
目录一、安装 Splash二、Splash 的使用 一、安装 Splash Splash 是一个 JavaScript 渲染服务，是一个含有 HTTP API 的轻量级浏览器，它还对接了 Python 中的 Twisted 库和 QT 库。利用它，同样可以爬取动态渲染的页面。利用 Splash，可以实现如下功能： 异步处理多个网页的渲染过程； 获取渲染后页面的源代码或截图。 通过关闭图片渲染或者使用 Adblock 规则的方式加快页面渲染的速度； 执行特定的 JavaScript 脚本； 通过 Lua 脚
详细的JavaScript知识梳理和经典的一百个例题,让你掌握JavaScript
qq_43623970的博客
04-21 1524
这里先做一下JavaScript知识点的梳理,具体的可领取资料 JavaScript语法： js语法.png DOM操作： DOM操作.png 数据类型 面向对象 继承 闭包 插件 作用域 跨域 原型链 模块化 自定义事件 内存泄漏 事件机制 异步装载回调 模板引擎 JSON ajax 面向对象.png JavaScript...
js 实现 记录滚动条位置
03-30
js 实现 记录滚动条位置! 值得下载看看!资源免费,大家分享!!
保存滚动条位置
e_yohn的专栏
08-22 510
function SetCookie(sName, sValue)  {   date = new Date();   s = date.getDate();   date.setDate(s+1);   //expire time is one month late!,
如何保存滚动条位置，可以把滚动条位置保存在某一具体位置
01-24
如何保存滚动条位置，可以把滚动条位置保存在某一具体位置
保持滚动条位置
xiaoding133的专栏【Stay hungry,Stay foolish】
08-14 1151
为了做到这个功能，我们需要做两件事情，第一，滚动条发生改变的时候记录滚动条位置。把它保存在hidden field 第二，当网页回发时，hidden field 的值会发送到服务器端，服务器告诉客户端重新设置滚动条位置。首先来看看javascript是怎么记录滚动条位置的。
保存页面的滚动条的位置
weixin_34202952的博客
11-26 446
1/**//// <summary> 2/// 功能：在页面post时保存屏幕滚动状态； 3/// 直接在Page_Load中加入Zeda.CNE.Common.RetainScrollPosition(); 4/// 不能加在if(!Page.IsPostBack){}内; 5/// 加入的两个隐藏域为__SCROLLPOS_TOP和...
JavaScript最全面试题
qq_60976312的博客
06-10 1503
JavaScript最全面试题
JavaScript
pengjianglilive的专栏
08-02 889
为什么学习 JavaScript? JavaScript 是 web 开发人员必须学习的 3 门语言中的一门： HTML定义了网页的内容 CSS描述了网页的布局 JavaScript控制了网页的行为 阅读本教程前，您需要了解的知识： 阅读本教程，您需要有以下基础： HTML 教程 CSS 教程 JavaScript简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 ...
JavaScript 前端面试题！！！
木木木森林
10-29 749
JavaScript 前端面试精华1. 介绍 js 的基本数据类型。2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？3. 什么是堆？什么是栈？它们之间有什么区别和联系？4. 内部属性 [[Class]] 是什么5. 介绍 js 有哪些内置对象？6. undefined 与 undeclared 的区别？7. null 和 undefined 的区别？8. 如何获取安全的 undefined 值？9. 说几条写 JavaScript 的基本规范？10. JavaScript 原型，原型链
js记录滚动条位置，页面刷新滚动条位置不变
搬砖的石头
09-04 1061
直接上代码 <div class="content" data-role="tab-content" data-id="course-a" runat="server" id="divContent" style="height: 365px; overflow-y: scroll" onscroll="KeepScrollBar()"> <p>...
js+cookie记录滚动条位置
weixin_34126557的博客
11-18 116
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>记录滚动条位置</TITLE><scriptlanguage="javascript"><!--func...
用js+cookie记录滚动条位置
加菲猫的快乐生活--我的理想
08-07 806
记录滚动条位置         function SetCookie(sName, sValue)     {         date = new Date();         s = date.getDate();         date.setDate(s+1);            //expire time is one month late!, and can
保持滚动条位置的问题
Jonly的专栏
05-28 2623
       也可以只针对某一个页面来设置这个属性，他的实现原理，其实是对页面的输出进行了一次封装，将整个页面放在了一个IFrame里...         src="/aspnet_client/system_web/1_1_4322/SmartNav.htm"> ... ...       有兴趣可以去研究一下SmartNav.js，我这里就不多说了，可以参考http://
保存滚动位置的实现方法
qq_39410252的博客
10-01 2269
有的时候从列表页面进入详情页面再返回列表页面，即使使用了keep-alive缓存列表页，也会导致列表页面你的滚动位置发生了变化。两个页面高度不一致导致页面跳转的时候滚动条位置发生了改变；keep-alive不会缓存滚动条的位置。为了解决这个问题我们需要手动的保存列表页面的滚动条位置，并再切换回列表页面的时候滚动到保存的位置。
js实现刷新页面后回到记录时滚动条的位置
FORLOVEHUAN的博客
05-25 2683
局部刷新后，要求滚动条在原下拉时的位置： 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 =..
JS获取滚动条位置、设置滚动条位置
qq_34754935的博客
08-23 1094
JS获取滚动条位置 getScrollTop() { let scrollPos; if (window.pageYOffset) { scrollPos = window.pageYOffset; }else if (document.compatMode && document.compatMode != 'BackCompat'){ scrollPos = document.documentElement.scrollTop;
JavaScript监听滚动条的进度条
employerboos的博客
10-27 552
<style type="text/css"> *{ margin: 0; padding: 0; } .g-box{ width: 100%; height: 4000px; background-color: #1AB1CC; } .progress{ width: 6px; height: 0%; background-color: deeppink; position: fixed;..
保存用户返回前浏览的位置——滚动条的位置
xiaoququ的博客
01-18 809
sessionStorage sessionStorage 的数据存储在当前页面的内存中，生命周期为关闭当前窗口 思路 当用户浏览页面时，监听页面滚动事件，获取滚动条的位置，存储在sessionStorage中； 当点击返回按钮时数据依然存在，关闭窗口后再进页面才会清空数据。 在进来页面一刷新，首先获取sessionStorage中存储的滚动条位置 设置滚动条的位置 $(document).sc...
JavaScript实现滚动条位置记录与分段显示
"该代码示例是一个使用JavaScript和jQuery实现的滚动条监控功能，当滚动到特定高度时记录数字，并在页面上显示已滚动的‘页数’。" 在这个示例中，主要涉及以下几个关键知识点： 1. **jQuery库**: 代码引入了`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值