有个同事说再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. CRUD Operations in MVC4 Using AngularJS and WCF REST Services

    Now in this article I will show how to do Create, Retrieve, Update and Delete (CRUD) operations in M ...

  2. echarts 地图图

    效果如下图: 1.下载echarts对应包: http://echarts.baidu.com/ 2.前端页面: <!DOCTYPE html> <html xmlns=" ...

  3. SharePoint 2010 文档管理之过期归档工具

    前言:使用过SharePoint的人都知道,SharePoint对于操作是便捷的,但是对于数据量承载却是不令人满意的,这样,就要求我们需要更加合理的使用,规范大家的使用规则和习惯,所以,定期清理不必要 ...

  4. Sharepoint增加修改密码功能

    Sharepoint中没有自带的修改密码的功能. 如果使用的是AD验证,修改密码,只要修改域帐号的用户名密码就可以了.以下代码可以修改本机密码和域帐号密码. 做法是,添加一个webpart,做一个页面 ...

  5. Java解析XML三种常用方法

    1.使用DOM方式解析: package com.wzh.dom; import java.util.Iterator; import javax.xml.parsers.DocumentBuilde ...

  6. Android 带清除功能的输入框控件EditText

    1.效果图      2.源码下载 http://download.csdn.net/detail/yanzi2015/8864603 3.相关博客 http://www.cnblogs.com/to ...

  7. C安全编码--数组

    建议和规则 建议: 理解数组的工作方式 获取数组的长度时不要对指针应用sizeof操作符 显示地指定数组的边界,即使它已经由初始化值列表隐式地指定 规则: 保证数组索引位于合法的范围内 在所有源文件中 ...

  8. json数组和List转换

    package hb; import java.util.Date; public class Person { String id; int age; String name; Date birth ...

  9. (ios实战)单个ViewControl适配不同ios版本xib文件实现

    xcode5 中的界面布局 根据sdk 分成ios7.0 and Later 和 ios6.1 and Earlier 两种,那如何xib同时支持 ios6 和ios7 的界面呢 方法如下: 在xco ...

  10. Solr5.0源码分析-SolrDispatchFilter

    年初,公司开发法律行业的搜索引擎.当时,我作为整个系统的核心成员,选择solr,并在solr根据我们的要求做了相应的二次开发.但是,对solr的还没有进行认真仔细的研究.最近,事情比较清闲,翻翻sol ...