sessionStorage缓存滚动条位置
想象在一个列表页,用户上滑页面浏览数据,点击某一条进入详情页,之后再从详情页返回列表页时不会想再从头去查看数据,这就要求我们记录用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部。这里需要用到sessionStorage,代码如下:
$(window).scroll(function(){
if($(document).scrollTop()!=0){
sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
}
});
window.onload = function(){
var _offset = sessionStorage.getItem("offsetTop");//获取滚动位置
$(document).scrollTop(_offset);
};
PS.
以上指的是用户通过链接方式返回列表页,会直接到列表页的顶部。如果是通过物理键返回貌似会自动记住刚刚浏览的位置。
sessionStorage缓存滚动条位置的更多相关文章
- JS008. 跳转缓存滚动条高度并返回时过渡动画(window.pageYOffset & window.scrollTo & SessionStorage)
业务场景 从列表跳转详情页,通过操作返回列表页时,滚动条仍然处于跳转前的高度,并加上 ease-out 的过渡动画. 由于sessionStorage是随页面即关即消的,所以比起VUEX.localS ...
- 印象最深的一个bug:sessionStorage缓存在移动端失效
无bug,不程序:作为程序员的我,不是修bug就是在写bug的路上. 移动端sessionStorage缓存失效是我"印象最深的一个bug"之一,为啥呢,因为这个问题导致我加班到很 ...
- WebStorage记录滚动条位置
因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 ht ...
- sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback
sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...
- 用 Javascript 获取页面大小、窗口大小和滚动条位置
页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...
- 解决ASP.NET回传后div滚动条位置复位的问题
中心思想:用一个隐藏控件保存当前scorll值.回传回来后根据scrollTop的值,然后在Page_Load中重新设置scrollTop. 首先是为DIV添加一个 onscroll="ja ...
- js设置滚动条位置
JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...
- cookie记录横向滚动条位置
一.Css <style type="text/css"> #x{ width: 100%; white-space: nowrap; overflow-x: scro ...
- JavaScript实现页面刷新滚动条位置不变(利用cookie)
实验环境:vs2015 asp.net(C#) 主要原理: 1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos], 2.页面刷新或重载时查询cookie[pos]中的值是否存在,若 ...
随机推荐
- K - Transformation
K - Transformation HDU - 4578 思路:发现自己的错误竟然是zz般的少了一个取模 ε=ε=ε=(#>д<)ノ #include<cstdio> # ...
- Spring Boot错误:Unable to start embedded container...的问题解决
解决方法: 1.用错了注解,改用以下注解: @SpringBootApplication 相当于:@Configuration.@ServletComponentScan.@EnableAutoCon ...
- Ajax的两种实现方式
//ajax的jquery实现 function aclick(){//alert("測试一");var name = $("#userName").val() ...
- 屏幕測试亮点,新买了一个显示器,使用web简单的測试下了亮点
1,购买了一个新的显示器 趁着双11的时候价格廉价.入手了一个显示器. http://serve.netsh.org/pub/dead_pixel.bin 滚动下就能够换颜色了.把chrome最大化, ...
- java中String的21种使用方法
(构造函数必须new出来) * public String (char[] vaue) 将一个字符数组变成字符串(构造函数) * public Stri ...
- JDBC中向数据库录入汉字产生乱码的解决办法
在近期的课程设计中遇到在eclipse中向数据库中录入数据,产生的汉字乱码现象,在这里提供一条解决的方法: 只需连接地址URL中数据库名后面添加“?characterEncoding=utf-8”即可 ...
- luogu1024 一元三次方程求解
题目大意 已知一元三次方程\(ax^3+bx^2+cx+d=0\): 有且只有3个根 对\(\forall x, x\in[-100,100]\) 对\(\forall x_1,x_2,|x_1-x_ ...
- luogu2774 方格取数问题 二分图最小权点覆盖集
题目大意:在一个有 m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,输出这些数之和的最大值. 思路:这种各个点之间互相排斥求最大值的题,往往需要利 ...
- yolo源码解析(3):视频检测流程
代码在自己电脑中!!!!不在服务器 根据前文所说yolo代码逻辑: ├── examples │ ├── darknet.c(主程序) │ │── xxx1.c │ └── xxx2.c │ ├── ...
- DNS同时占用UDP和TCP端口53——传输数据超过512时候用tcp,DNS服务器可以配置仅支持UDP查询包
DNS同时占用UDP和TCP端口53是公认的,这种单个应用协议同时使用两种传输协议的情况在TCP/IP栈也算是个另类.但很少有人知道DNS分别在什么情况下使用这两种协议. 先简单介绍下TCP与UDP. ...