javascript设置网页刷新或者重新加载后滚动条的位置不变
有个同事说再javascript中你可以做任何你想做的事情,当时觉得不以为然,今天遇到个问题,就是页面重新加载后总是回到页面的顶部,如果客户只想看到他想看到的部分是怎么变化的,这个体验就好了。原本想象应该有页面设置scroll之类的,没有看到,在网上搜到一个方法就是在页面加载前用cookie记录滚动条的位置,加载之后从cookie中取回这个值再设置滚动条的位置,这个方法如此风骚。
window.onbeforeunload = function(){
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
document.cookie="scrollTop="+scrollPos; //存储滚动条位置到cookies中
}
window.onload = function()
{
if(document.cookie.match(/scrollTop=([^;]+)(;|$)/)!=null){
var arr=document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空,则读取滚动条位置
document.documentElement.scrollTop=parseInt(arr[1]);
document.body.scrollTop=parseInt(arr[1]);
}
}
javascript设置网页刷新或者重新加载后滚动条的位置不变的更多相关文章
- H5下拉刷新和上拉加载实现原理浅析
前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...
- mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...
- C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在前一篇博客<C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案>中介绍了目前市场主流 ...
- js 前端实现下拉刷新 上拉加载
效果 css html,body{ height:100%; // 其他界面未设置html 无法监听scroll } /* 下拉刷新 */ .refresh-loading { transition: ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- listview下拉刷新和上拉加载更多的多种实现方案
listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局 android系统为listview提供了addfootview ...
- Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理
RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- .NET破解之100%营销QQ辅助软件【更新】
应网友要求,更新一个以前的版本,效果如下: 更改方法 修改一:更改对象的可访问性 Assembly: RWXComLibrary, Version=2.1.0.3 Name: RWXComLibrar ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q111-Q114)
Question 111You create a custom page layout that contains the following code segment. (Line numbers ...
- 用thinkPHP实现验证码的功能
许多系统的登录都有验证码,而如果使用thinkPHP框架搭建网站的话,验证码的生成和验证就比较容易了 1.生成验证码 thinkPHP有对应生成验证码的方法 要使用验证码,需要导入扩展类库中的ORG. ...
- iOS开发之网络编程--4、NSURLSessionDataTask实现文件下载(离线断点续传下载) <进度值显示优化>
前言:根据前篇<iOS开发之网络编程--2.NSURLSessionDownloadTask文件下载>或者<iOS开发之网络编程--3.NSURLSessionDataTask实现文 ...
- 在类库项目中使用log4net(RollingFileAppender)记录日志
1.创建解决方案 2.创建类库项目 3.根据需要修改命名空间,修改(和/或)添加类到类库 4.引用log4net 5.类库项目根目录下创建leg4net配置文件,如D3CallTriggerPlugi ...
- 关于Redis持久化
Redis有两种持久化的方式:快照(RDB文件)和追加式文件(AOF文件) RDB持久化方式是在一个特定的间隔保存某个时间点的一个数据快照. AOF(Append only file)持久化方式则会记 ...
- Progress Control with Text
原文链接:http://www.codeproject.com/Articles/80/Progress-Control-with-Text 重写的Progress 包括,设置bar前景背景颜色,设置 ...
- D_S 循环队列的基本操作
// main.cpp #include <iostream> using namespace std; #include "Status.h" typedef in ...
- 备忘:文本编辑器(z.B. Sublime Text 2)策略,git策略
1.以Sublime Text 2 为例: 新建一个test.py文件,敲完例程 代码 之后,再另存为比如 if.py, list_tuple.py云云 而test.py可以一直用来编辑 2.git ...
- 标准IO的缓冲问题
在看APU时,第8章进程时, #include <stdio.h> #include <unistd.h> ; char buf[] = "a write to st ...