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 ...

随机推荐

Ubuntu 12.04下mysql的安装与配置
转自:http://blog.csdn.net/ichsonx/article/details/9285935 准备 0. 获取 mysql-5.5.15-linux2.6-i686.tar.gz ...
Eclipse打开javadoc框
Window->Show View->Other->Java->Javadoc 这样你用鼠标选中一个element就可以在Javadoc tag中显示信息了,而不是那种浮动窗口 ...
iostbleView刷新后显示指定cell
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.01 * NSEC_PER_SEC)), dispatch_get_main_q ...
为gridview的每个单元格添加鼠标悬停提示文本（tooltip）
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { for (int i ...
linux设置开机服务自动启动/关闭自动启动命令
linux设置开机服务自动启动/关闭自动启动命令 2012-02-06 15:13 [root@localhost ~]# chkconfig --list 显示开机可以自动启动的服务[roo ...
iOS边练边学--(Quartz2D)图片裁剪，带圆环的裁剪
一.图片裁剪,示意图二.带圆环的图片裁剪示意图
JS 播放列表收缩展开
下面要做实现的效果收缩和展的功能遵循网页布局,行为,结构,样式分离下面是html 结构代码: <div id="drop" class="down_list ...
jQuery的发展史，你知道吗？
2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间).虽然过了这么久,但它依然以其简洁.灵活的编程风格让人一见倾心.在本篇文章中,我们将讲述jQuery的 ...
lseek函数与文件空洞
在UNIX/LINUX系统中,文件位移量可以大于文件的当前长度,这种情况下向文件中写入数据就会产生文件空洞(hole),这些没写入数据的文件空洞部分默认会被0填满.虽然这些文件空洞并没有实际的数据,但 ...
R语言低级绘图函数-abline
abline 函数的作用是在一张图表上添加直线, 可以是一条斜线,通过x或y轴的交点和斜率来确定位置:也可以是一条水平或者垂直的线,只需要指定与x轴或y轴交点的位置就可以了常见用法: 1)添加直线 ...

ajax异步加载回跳定位

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

随机推荐

热门专题