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

随机推荐

python生成二维数组
Array= [[0 for i in range(15)] for i in range(15)]
iphone 6plus 下app里的状态栏和界面会被放大的问题//以及设置APP闪屏页/APP图标流程
//设置APP闪屏页/APP图标流程如下 2.6Plus界面显示变大以及APP图标变大是由于上面图片的AppIcon以及LaunchImage造成的,主要是由于找不到对应的3x图片,或者改3x图片尺寸 ...
基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效
今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...
【Unity】使用Git管理项目及其.gitignore写法
完整的进行Unity 3D源码用Git管理的流程: 1 新建文件夹(路径要求非空) 2 新建U3D项目 3 添加.gitignore文件获取已有的U3D项目修改Unity 3D编辑器: Enabl ...
EMC现场测试-EFT、ESD、Surge和场辐射
EMC测试主要进行了4项: 1. ESD 采用静电枪测试,接触电压±6KV,检测了整个箱体和内部可见金属部分: 空气放电正负8KV,检测了箱体及内部金属部分(如板卡壳体),特别检测了220V电源插头及 ...
Nginx_lua缓存问题，关闭lua_code_cache
打开nginx.conf配置server{ lua_code_cache off; //关闭lua缓存重启后生效 server_name localhost; default_type 'text/ ...
mac上php+nginx配置
brew的安装: ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”php安装和配置bre ...
iOS边练边学--UINavigationController导航条的使用
一.使用UINavigationController的步骤以及代码 // 程序加载完成后执行的代码 - (BOOL)application:(UIApplication *)application d ...
WPF教程三：布局之WrapPanel面板
WrapPanel:环绕面板 WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行. Orientatio ...
篇三：XPath--解析Html
导语:爬虫爬取的界面,大致分为静态界面.ajax异步加载.动态界面.静态界面直接获取HTML对象,然后使用XPath获取值最有用的路径表达式: 表达式描述 nodename 选取此节点的所有子节点 ...

ajax异步加载回跳定位

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

随机推荐

热门专题