jQuery返回定位插件详解

2020-05-24 21:34:20易采站长站整理

* 兴趣的,点进详情看完了,回来一看,不见了,是不是很呕心啊。
* 2.难点在哪里?
* 难点1:当我们有很多的列表的时候,列表肯定是滚动加载。于是我们直接保存滚动条的位置
* 的方式可以放弃了。
* 难点2:我们怎么确定是从详情返回来的?
* 3.我们该怎么实现呢?
* 其实我们实现的方式跟保存滚动条的位置差不多。但要对scrollTop的距离进行处理。
* a.我们点击这点详情的时候,可视区域列表的条数,可以是一页的数据,可能会是2页数据。
* 这种情况下我们都要把结果保留下来。
* b.当我们点击这条数据的时候存现当前页滚动了多少就可以了。
*
* 下面具体看代码:
*/
(function(global,$,factory){
var keepScrollTop = 0; //用于最后保存的滚动条的位置
var tool =factory();
$.fn.savePosition = function(options){
var dataPage,logo,objLogo,prevNum,containerHeight = 0,scrollTopDistance = 0,elIndex = 0,
prevHeight = 0,prevCountPage = 0,prevCountPageDistance = 0,prevDistance = 0,
prevPageScrollDistance = 0;
var elements = this;
var defaults = {
container:$(window), //滚动的容器
logo:"data-url", // 用于计算在这个容器中的每个LI中的唯一标识量。一般为去详情的连接
currentPage:"data-page", //点击当前的li的页码
pageResize:30, //与后台交互的每页返回的数量。 默认是30,
goToDetailElement:$(".go-detail") , //滚动的每个列的总对象
nodeLi:"", //元素节点
getPageNum:"getPageNum", //1表示单页数据,2表示双页数据。设置是请求单页数据还是双页数据的标识量。放在URL上。
urlPageNum:"pageNum", //用于放到URL上面的参数标识表示当前是几页. pageNum = currentPage //返回来的时候用这个参数来判断是不是需要滚动
};
var settings = $.extend(defaults,options || {});
dataPage = elements.attr(settings.currentPage); //求出点击对象位于哪一个页码
logo = elements.attr(settings.logo); //求出当前对象的唯一标识量
containerHeight = parseInt(settings.container.outerHeight()); //容器的高度
scrollTopDistance = parseInt(settings.container.scrollTop()); //滚动的距离
elements.parent().find(""+ settings.nodeLi + "["+settings.currentPage + "=" + dataPage +"]").each(function(index, obj){
objLogo = $(obj).attr(settings.logo);
elIndex = index;
if(logo == objLogo){
prevNum = elements.prevAll().length;
prevHeight = tool.getDistance(elements.parent().children(),prevNum - elIndex);
prevCountPage = parseInt(prevNum / settings.pageResize);