想象在一个列表页,用户上滑页面浏览数据,点击某一条进入详情页,之后再从详情页返回列表页时不会想再从头去查看数据,这就要求我们记录用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部。这里需要用到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. Spring 学习二-----AOP的原理与简单实践

    一.Spring  AOP的原理 AOP全名Aspect-Oriented Programming,中文直译为面向切面(方面)编程.何为切面,就比如说我们系统中的权限管理,日志,事务等我们都可以将其看 ...

  2. 0622 CentOS 6.4下编译安装MySQL 5.6.14

    转自http://www.cnblogs.com/xiongpq/p/3384681.html 概述: CentOS 6.4下通过yum安装的MySQL是5.1版的,比较老,所以就想通过源代码安装高版 ...

  3. JAVA之StringBuffer测试样码

    这类操作大同小异,但是,高手却能从String,StringBuilder,StringBuffer的应用场景和性能上,分析出其在JAVA编译和JVM上的实现过程差别. 我在CSDN上就看到一个高手分 ...

  4. UDP bind() IP和prot

    http://blog.csdn.net/qq_28171461/article/details/69523604

  5. 第五节、矩阵分解之LU分解

    一.A的LU分解:A=LU 我们之前探讨过矩阵消元,当时我们通过EA=U将A消元得到了U,这一节,我们从另一个角度分析A与U的关系 假设A是非奇异矩阵且消元过程中没有行交换,我们便可以将矩阵消元的EA ...

  6. 安装Maven并搭建Maven私有仓库

    一.说明 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.我们在进行Java代码开发的时候,Eclipse+Maven+Jetty是一个十 ...

  7. _DataStructure_C_Impl:求图G中从顶点u到顶点v的一条简单路径

    #pragma once #include<stdio.h> #include<stdlib.h> #define StackSize 100 typedef int Data ...

  8. 微博预计要火一阵的SleepSort之Shell及C实现

    今日在微博看到如此奇妙的代码.竟然还有新的sort算法,对于我这样的渣渣必须研究一下,代码例如以下: #!/bin.bash function f() { sleep "$1" / ...

  9. hdu5326 Work

    题目链接:点击打开链接 题目大意:有n个人.各自管理不同的人,问有多少人管理k个人. 思路:先记录每一个人的直接上级.然后模拟路径压缩的过程进行计数求和. #include<stdio.h> ...

  10. 【翻译自mos文章】 asmcmd cp命令不能拷贝大于2GB的文件。

    asmcmd cp命令不能拷贝大于2GB的文件. 參考原文: Asmcmd CP Command Can Not Copy Files Larger Than 2 GB (Doc ID 786258. ...