有个同事说再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设置网页刷新或者重新加载后滚动条的位置不变的更多相关文章

  1. H5下拉刷新和上拉加载实现原理浅析

    前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...

  2. mui下拉刷新上拉加载

    新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...

  3. C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在前一篇博客<C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案>中介绍了目前市场主流 ...

  4. js 前端实现下拉刷新 上拉加载

    效果 css html,body{ height:100%; // 其他界面未设置html 无法监听scroll } /* 下拉刷新 */ .refresh-loading { transition: ...

  5. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  6. listview下拉刷新和上拉加载更多的多种实现方案

    listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局        android系统为listview提供了addfootview ...

  7. Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理

    RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...

  8. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  2. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q63-Q65)

    Question 63You have a SharePoint farm that has more than 100 custom Features.You upgrade several Fea ...

  3. Android--Apache HttpClient

    前言 上一篇文章介绍了使用HttpURLConnection来完成对于HTTP协议的支持.现在介绍一个新的方式来访问Web站点,那就是HttpClient. HttpClient是Apache开源组织 ...

  4. File存储 - 文件存储

    博客地址 http://www.cnblogs.com/mmyblogs/p/6107472.html(转载请保留) 文件存储 文件存储是 Android 中最基本的一种数据存储方式,它不对存储的内容 ...

  5. 【读书笔记】iOS-头文件导入-@class注意事项

    一,导入头文件有两种不同的方法:使用引号或者使用尖括号,例如,#import <Cocoa/Cocoa.h>和#import "Tire.h".带尖括号的语句是用来导入 ...

  6. IOS开发支付宝集成

    开发准备 1.首先新建项目,然后去官网下载最新的开发包:http://doc.open.alipay.com/doc2/detail?treeId=59&articleId=103563&am ...

  7. 【iOS开发】UIWebView与JavaScript(JS) 回调交互

    ------------------------------------------------- 很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一 ...

  8. CoreAnimation-07-CAAnimationGroup

    概述 简介 CAAnimationGroup又称组动画或动画组 将多个动画放到动画组中,并赋值给layer的animations属性,动画组中所有动画就会并发执行 注意事项 动画组中的动画不会被压缩, ...

  9. 监听spring加载完成后事件

    有这个想法是在很早以前了,那时的我没有接触什么缓存技术,只知道hibernate有个二级缓存.没有用过memcache,也没有使用过redis. 只懂得将数据放到数组里或者集合里,一直不去销毁它(只有 ...

  10. 百度地图API说明

    JZ's Blog的博客对百度地图说明很清晰 http://www.jiazhengblog.com/blog/2011/07/02/289/