想象在一个列表页,用户上滑页面浏览数据,点击某一条进入详情页,之后再从详情页返回列表页时不会想再从头去查看数据,这就要求我们记录用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部。这里需要用到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. JS代码引用位置问题-转

    看到很多JS代码全部放在head中的情况,其实这是个细节问题.转载一个知乎用户于江水的答案: 作者:于江水链接:https://www.zhihu.com/question/34147508/answ ...

  2. caffe Solve函数

    下面来看Solver<Dtype>::Solve(const char* resume_file) solver.cpp template <typename Dtype> v ...

  3. ZOJ 3494

    超级神奇有趣题. AC自动机+数位DP.其实,数位DP在处理含有某些数字时特别不好处理,应该把它倒转为求不含有.这道题把数位DP+AC自动机结合起来,实在是很巧妙,把数字变为串来处理,强大! 要使用A ...

  4. hdu 1239

    首先,p,q>=2,所以p,q<=50000; 然后,我们观察a<=b<1000,而p,q<=100000.那么,q>=10000时,p<=10,则a/b&l ...

  5. java 线程 错失的信号、notify() 与notifyAll的使用

    package org.rui.thread.block; import java.util.Timer; import java.util.TimerTask; import java.util.c ...

  6. 初探boost之noncopyable学习笔记

    noncopyable 功能 同意程序轻松实现一个不可复制的类. 需包括头文件 #include<boost/noncopyable.hpp>     或 #include<boos ...

  7. UVA11234 Expressions

    题目的意思实在是读不懂,又是把栈变成队列什么的.. 只是大体的意思就是把后缀表达式变一下.. 抛开意思,事实上就是依据输入建个树,然后倒序输出.. 拿第一个例子说明:大写代表操作符(+ - × /之类 ...

  8. ubuntu之修改ls显示颜色

    Linux 系统中 ls 文件夹的痛苦我就不说了,为了不伤眼睛,一般 ssh 终端背景都用的黑色,文件夹又是你妈的深蓝色,每次看文件夹都要探头仔细去看.这下彻底解决这个问题.   因为ubuntu下的 ...

  9. Linux - 常用网络命令详解netstat,scp

    ifconfig 查看生效的ip信息. [root@local ~]# ifconfig eno16777736: flags=4163<UP,BROADCAST,RUNNING,MULTICA ...

  10. jquery选择器(可见对象,不可见对象) +判断,对象(逆序)

    //可见对象: $("li:visible ") //可见对象下的 隐藏对象 $("li:visible [type='hidden']") //获得 可见 的 ...