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]中的值是否存在,若 ...
随机推荐
- Spring框架自学之路——简易入门
目录 目录 介绍 Spring中的IoC操作 IoC入门案例 Spring的bean管理配置文件 Bean实例化的方式 Bean标签的常用属性 属性注入 使用有参构造函数注入属性 使用set方法注入属 ...
- swift初始化
swift初始化 class INIT: NSObject { // 一个结构体的初始化 // 1.存储属性的初始化 struct Fahrenheit { var temperature :Doub ...
- Noip2011瑞士轮题解
题目背景 在双人对决的竞技性比赛.如乒乓球.羽毛球.国际象棋中.最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少.每场都紧张刺激,但偶然性较高.后者的特点是较为公平,偶然性较低,但比赛过程往往十分 ...
- atitit.浏览器插件解决方式----ftp插件 attilax 总结
atitit.浏览器插件解决方式----ftp插件 attilax 总结 1. 界面概览 D:云盘同步目录p5p5f tp.demo.html1 2. 初始化1 3. 事实调用2 4. 參考2 1 ...
- 曲线控件我一直用codeproject上的那几个(C++ 100款开源界面库)
Alberl#23楼[楼主] 2013-11-04 11:47 Alberl @baita00引用看了大神的教程,真的不错,学习了很多东西,^_^.这节教程里,大神好像在找曲线控件,是吗?大神有什特殊 ...
- luogu2242 公路维修问题
题目大意 把一个高速公路看作由连续排列的一个个格子组成,有n个格子上有坑.给出m,要求出m段区间,使得这m区间覆盖到所有坑(交通管制),且占据的格子数量最少.输出占据的格子数. 题解 换个角度看问题. ...
- ijkplayer详解AAA
https://www.jianshu.com/p/c5d972ab0309 https://www.android-arsenal.com/details/1/530 https://stackov ...
- Spring中JdbcTemplate中使用RowMapper
转自:https://blog.csdn.net/u012661010/article/details/70049633 1 sping中的RowMapper可以将数据中的每一行数据封装成用户定义的类 ...
- js获取验证码 秒表效果(原创)
<script src="http://code.jquery.com/jquery-latest.js"></script> <input type ...
- [JavaEE] DWR入门教程
DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给 ...