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]中的值是否存在,若 ...
随机推荐
- Hive教程(1)
1. 介绍 Apache Hive可以使用SQL来读,写,管理分布式存储的大数据集,结构可以投射到已经存储的数据上,命令行工具和JDBC驱动可以让用户连接到Hive. 2. 安装和配置 你可以下载Hi ...
- Udp发送端和接收端
//UdpReceive.java /* 定义udp的接收端. 思路: 1.定义udpSocket服务.一般会监听一个端口,事实上就是这个接收网络应用程序定义一个数字标示. 2.定义一个数据包.用来存 ...
- HDU 5186
easy !! #include <iostream> #include <cstdio> #include <algorithm> #define LL __in ...
- python3字符编码错误
在3.x 这里返回的是bytes-like类型, 所以这里不需要释放编码 ,释放也没有意义, 而是应该encode 转换成我们需要的编码, 之所会造成类型错误,原因是就在这里. 他们返回的类型不一样, ...
- 搭建自己的websocket server_1
用Node.js实现一个WebSocket的Server. https://github.com/sitegui/nodejs-websocket#event-errorerr nodejs-we ...
- C++字符串与指针 所有的内容也就这么多了。
1.定义一个字符串数组并初始化,然后输出其中的字符串. #include <iostream> using namespace std;int main(){ char str[]=&qu ...
- Java常见面试题02-方法重写和方法重载的区别?方法重载能改变返回值类型吗?
方法重写和方法重载的区别?方法重载能改变返回值类型吗? A:Override方法重写和Overload方法重载的区别? Overload是否可以改变返回值类型?可以 方法重写 • 子类中 ...
- android 学习记录-----------android 活动 意图 碎片
将此篇博客作为记录android项目开发过程中的学习记录
- BZOJ 2729 高精度+组合数学
思路: 考虑 把男生排成一排 女生和老师往里插 分成两种情况. 1. 女生中间夹着老师 2. 女生中间没有夹着老师 求一下组合* 阶乘就好了 先放Python代码 简洁易懂 def fact(n): ...
- A - Presents
Problem description Little Petya very much likes gifts. Recently he has received a new laptop as a N ...