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>
上一篇:JS 格式化时间(获取两个日期之间的每一天、每一月、每半小时、每一秒)


下一篇:【Qt开发】QScrollArea添加布局后没有出现滚动条的解决方法