想象在一个列表页,用户上滑页面浏览数据,点击某一条进入详情页,之后再从详情页返回列表页时不会想再从头去查看数据,这就要求我们记录用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部。这里需要用到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缓存滚动条位置的更多相关文章

  1. JS008. 跳转缓存滚动条高度并返回时过渡动画(window.pageYOffset & window.scrollTo & SessionStorage)

    业务场景 从列表跳转详情页,通过操作返回列表页时,滚动条仍然处于跳转前的高度,并加上 ease-out 的过渡动画. 由于sessionStorage是随页面即关即消的,所以比起VUEX.localS ...

  2. 印象最深的一个bug:sessionStorage缓存在移动端失效

    无bug,不程序:作为程序员的我,不是修bug就是在写bug的路上. 移动端sessionStorage缓存失效是我"印象最深的一个bug"之一,为啥呢,因为这个问题导致我加班到很 ...

  3. WebStorage记录滚动条位置

    因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 ht ...

  4. sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback

    sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...

  5. 用 Javascript 获取页面大小、窗口大小和滚动条位置

    页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...

  6. 解决ASP.NET回传后div滚动条位置复位的问题

    中心思想:用一个隐藏控件保存当前scorll值.回传回来后根据scrollTop的值,然后在Page_Load中重新设置scrollTop. 首先是为DIV添加一个 onscroll="ja ...

  7. js设置滚动条位置

    JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...

  8. cookie记录横向滚动条位置

    一.Css <style type="text/css"> #x{ width: 100%; white-space: nowrap; overflow-x: scro ...

  9. JavaScript实现页面刷新滚动条位置不变(利用cookie)

    实验环境:vs2015 asp.net(C#) 主要原理: 1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos], 2.页面刷新或重载时查询cookie[pos]中的值是否存在,若 ...

随机推荐

  1. [Drupal]主题教程

    drupal6和drupal7的主题开发有很大不同,本指南包含了这些不同 drupal7的默认主题是Bartik,6的是Garland drupal的主题系统是如何工作的 这部分内容主要讲述的是dru ...

  2. hdoj 3488 Tour 【最小费用最大流】【KM算法】

    Tour Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) Total Submi ...

  3. 什么是A记录、MX记录、CNAME记录具体介绍

    什么是A记录: A (Address) 记录是用来指定主机名(或域名)相应的IP地址记录.用户能够将该域名下的站点服务器指向到自己的web server上. 同一时候也能够设置域名的子域名. 通俗来说 ...

  4. 0x54 树形DP

    树形DP我只知道千万别写森林转二叉树慢的要死 没有上司的舞会 水!裸! #include<cstdio> #include<cstring> #include<cstdl ...

  5. 【POJ 1084】 Square Destroyer

    [题目链接] http://poj.org/problem?id=1084 [算法] 迭代加深 [代码] #include <algorithm> #include <bitset& ...

  6. AIX&nbsp;常用命令汇总(一)

    命令 内核 如何知道自己在运行 32 位内核还是 64 位内核? 要显示内核启用的是 32 位还是 64 位,可输入以下命令: bootinfo -K 如何知道自己在运行单处理器还是多处理器内核? / ...

  7. POJ 2337 欧拉回路

    题意: 如果给出的单词能够首尾相接,请按字典序输出单词,中间要加'.' 否则输出三个"*". 思路: 欧拉回路 记得按字典序排序哦~ 加边的时候要倒着加.(邻接表遍历的时候是反着的 ...

  8. Mvc NuGet 数据迁移

    网上有很多的ef  code first 的使用的方式,很乱,下面是我自己整理出来的,有什么不正确的地方还请指正,本人菜鸟一枚! 1.新建一个类库 =>引用 右击 管理NuGet程序包 添加En ...

  9. JavaScript全局函数

    JavaScript 中包含以下 7 个全局函数,用于完成一些常用的功能(以后的章节中可能会用到):escape( ).eval_r( ).isFinite( ).isNaN( ).parseFloa ...

  10. Nginx介绍及知识点(摘抄)

    正向代理是把自己的网络环境切换成代理的网络 反向代理是代理机器返回给我要我的资源 本文借鉴参考于http://tengine.taobao.org/book/chapter_02.html. 属于纯干 ...