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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值