您的位置：首页
ajax异步加载回跳定位
2016-12-30 09:36
120 查看
1）首先，问题是这样的：page1在一个滚动到页面底部加载更新的函数（功能），当页面滚动了第二页（或更多页）时，点击链接跳转到了其他页面（page2），在page2有返回按钮，当从page2返回page1时，返回不了（定位）page1的异步第二页了
2）这个问题很明显就是因为page1的分页是异步加载的，从page2返回page1时，page1已刷新，回到异步第一页，怎么弄成不管从page1的异步任意一页跳转page2，返回时定位回page1跳转前的位置呢？？
3）如果你的用的前端框架（单面应用），这个问题就不用处理了（已加载的东西还在那，不会刷新，不会出现这个问题），但如果你有网页非常蛋痛刚好是两个独立的页面还没法非常简单改成单面应用，下面这个函数可以就有点用了~~~~~~~
直接上代码
page1：
page2：
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 异步加载 list集合数据
- jQuery的AJax异步加载片段
- scrapy入门实战练习（三）----抓取AJAX异步加载网页
- ThinkCMF中如何实现ajax异步加载
- CKeditor编辑器ajax异步加载数据
- Ajax 异步加载
- AJAX中的同步加载与异步加载
- xtree dwr (ajax)异步加载每个树结点的代码
- ajax异步加载使用post方法时一直输出相同结果，不能实现翻页
- ajax异步加载中遇到的onclick无法传递中文参数问题
- jQuery-瀑布流-绝对定位布局（二）(延迟AJAX加载图片)
- 【AJAX】使用getScript()方法异步加载并执行js文件
- jQuery-瀑布流-绝对定位布局（二）(延迟AJAX加载图片)
- 关于有时候ajax异步加载，导致有时候无法正确提示加载完成的状态
- SharePoint 实现ajax异步加载数据的几种方式
- ajax加载列表 当点击进入详细页再次返回列表定位到当前点击位置解决办法
- JQuery,ajax异步加载<select><option></option></select>多选框：
- Ajax 异步加载解析
- MVC Ajax Helper或Jquery异步加载部分视图