ajax异步加载回跳定位

1）首先，问题是这样的：page1在一个滚动到页面底部加载更新的函数（功能），当页面滚动了第二页（或更多页）时，点击链接跳转到了其他页面（page2），在page2有返回按钮，当从page2返回page1时，返回不了（定位）page1的异步第二页了

2）这个问题很明显就是因为page1的分页是异步加载的，从page2返回page1时，page1已刷新，回到异步第一页，怎么弄成不管从page1的异步任意一页跳转page2，返回时定位回page1跳转前的位置呢？？

3）如果你的用的前端框架（单面应用），这个问题就不用处理了（已加载的东西还在那，不会刷新，不会出现这个问题），但如果你有网页非常蛋痛刚好是两个独立的页面还没法非常简单改成单面应用，下面这个函数可以就有点用了~~~~~~~

直接上代码

page1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
    <style type="text/css">
        ul{list-style-type:decimal;}
    </style>
</head>
<body>
    <ul id="list">
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
        <li><a href="page2.html">随便写点什么~~~~</a></li>
    </ul>

    <script type="text/javascript">
    /**
     * 设置回滚功能函数
     * @param {string}         page_name     页面的名字（标识）
     * @param {function}     loadFunc     加载函数
     */
    function setRollBack(page_name, loadFunc){
        var _window = window;
        var _name     = page_name+'_scrollTop';
        var scroll_top     = 0;

        //如果存在记录就回滚
        if(scroll_top=sessionStorage.getItem(_name)){
            if(document.body.scrollHeight-window.screen.availHeight<scroll_top){
                if(loadFunc) loadFunc(scroll_top);
            }else{
                _window.scrollY = scroll_top;
            }
        }

        _window.addEventListener('scroll', function(){
            sessionStorage.setItem(_name, document.body.scrollTop);
        });
    }

    /**
     * 假设这个是异步加载函数
     * @param  {int}         pageNo    页数
     * @param  {function}     _callback 加载完成回调函数
     */
    function loadMore(page_no, _callback){
        console.log(page_no);

        document.getElementById('list').innerHTML += '<li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li><li><a href="page2.html">随便写点什么~~~~</a></li>';

        if(_callback) _callback();
    }
    </script>

    <!--*******************************华丽的分割线，下面是应用*******************************************-->

    <script type="text/javascript">
    //页码
    var page_no = 1;

    //回调无限加载
    var do_loadMore = function(scroll_top){
        loadMore(++page_no, function(){
            if(document.body.scrollHeight-window.screen.availHeight<scroll_top){
                //回调
                do_loadMore(scroll_top);
            }else{
                window.scrollY = scroll_top;
            }
        });
    };

    //注册使用函数
    setRollBack('page1', do_loadMore);

    //模拟滚动加载
    window.addEventListener('scroll', function(){
        if(document.body.scrollHeight -window.screen.availHeight-document.body.scrollTop<100){
            loadMore(++page_no);
        }
    });
    </script>
</body>
</html>

page2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
</head>
<body>
    <a href="javascript:history.back();">返回</a>
</body>
</html>

ajax异步加载回跳定位的更多相关文章

淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
Scrapy爬虫框架教程（四）-- 抓取AJAX异步加载网页
欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...
jQuery的AJax异步加载
主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...
ajax异步加载问题
使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.
Ajax 异步加载
AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...
使用Ajax异步加载页面时，怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
AJAX异步加载
AJAX含义: 即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX可以跨 ...
ajax异步加载查询数据库
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
ajax 异步加载显示等待效果
css: #loading { width:170px; height:25px; border:3px solid #C3DAF9; position:absolute; top:300px; le ...

随机推荐

Centos7 squid安装与配置
装squid yum install -y squid 安装httpd(用于后面生成密码文件) yum install -y httpd 或者 yum install httpd-tools -y 配 ...
百度BAE 平台PHP对Mongodb的连接
<?php /*请替换为你自己的数据库名(可从管理中心查看到)*/ $dbname = 'XgmsRXDEYIDGmQFCjaZl'; /*从环境变量里取host,port,user,pwd*/ ...
ios最新调用手机相册选取头像(UIActionSheet过期)
由于 UIActionSheet过期所以可以使用如下调用手机相册前提不要忘记添加代理如下两个 UIImagePickerControllerDelegate,UINavigationControll ...
【Unity笔记】经典的鼠标点击射线检测碰撞
void Update (){ )){ //从摄像机发出到点击坐标的射线 Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); Ra ...
Kettle安装与配置
设置好了之后可以测试下后来百度发现是缺少mysql的JDBC连接驱动 kettle在初次配置的时候容易出这个问题,这个是由于java程序在连接mysql数据库的时候缺少驱动我的kettle版本是4 ...
设计和开发ETL系统（二）——启动
在针对某个维度模型开始ETL系统设计之前,应当完成逻辑设计,草拟高层架构计划,并且为所有的数据元素拟定源到目标映射. ETL的设计过程十分重要: 收集所有的相关信息,包括事物处理系统中所允许的提取处理 ...
[Makefile]多目录Makefile写法
最近需要写一个测试程序,这个测试程序需要集成一些功能,写在同一个文件看上去很不好,多个文件的Makefile又不是很熟,于是分享下面这篇文章先介绍下,调试Makefile时,想知道某个变量的值,怎么 ...
CMake 用法导览
Preface : 本文是CMake官方文档CMake Tutorial (http://www.cmake.org/cmake/help/cmake_tutorial.html) 的翻译.通过一个样 ...
DataGridView使用技巧一：获取或设置当前单元格的内容
当前单元格指的是DataGridView焦点所在的单元格,它可以通过DataGridView对象的CurrentCell属性取得.如果当前单元格不存在的时候,返回null. 取得当前单元格的内容: o ...
mongodb查询之从多种分类中获取各分类最新一条记录
mongodb查询之从多种分类中获取各分类最新一条记录 2017年04月06日 13:02:47 monkey_four 阅读数:6707更多个人分类: MongoDBJavaScript 文章 ...

ajax异步加载回跳定位

ajax异步加载回跳定位的更多相关文章

随机推荐

热门专题