1. 程式人生 > >返回上一頁時返回不到離開時的位置

返回上一頁時返回不到離開時的位置

我遇到的是兩種情況:一種是直接在DOM中顯示的,一種是Ajax分頁的

一、第一種使用cookie的方式

$(function () {
var str = window.location.href;
str = str.substring(str.lastIndexOf("/") + 1);
if ($.cookie(str)) {

$("html,body").animate({ scrollTop: $.cookie(str) }, 1000);
}
else {
}
})

$(window).scroll(function () {
var str = window.location.href;
str = str.substring(str.lastIndexOf("/") + 1);
var top = $(document).scrollTop();
$.cookie(str, top, { path: '/' });
return $.cookie(str);

})

這種方式是使用jQuery庫,當然還需要引入jquery.cookie.js檔案啦

利用h5的技術(localstorage&sessionstorage)

localstorage是本地快取,不會自動清除;sessionstorage是會話快取

我是用localstorage來記錄ajax分頁請求後的資料,sessionstorage來記錄位置

page_flag=true;

function ajax_goods(page){
   $.ajax({
      type: 'post', 
      url: '__APP__/Shop/Index/ajax_goods_list',
      data: 'page='+page+'&n='+Math.random(),
      success: function(msg){ 
      //console.log(msg); 
            if(msg.code=='ok'){

                $(".pro_list").append(msg.msg); 

                localStorage.setItem(page,msg.msg);//記錄結果
                clickState=0;
            }else{
                    $(".pro_list").append('  <span id="ends" style="text-align: center;display: block;height: 40px;float: left;width: 100%;line-height: 40px;">沒有更多商品了</span>');
                page_flag=false;
            }
             
          },
      dataType: 'json'
  });  

}

//頁面滑動的位置儲存到sessionstorage

$(document).on("touchend",".A_container",function(){
       var tops= document.documentElement.scrollTop + document.body.scrollTop;
       sessionStorage.setItem("offsetTop", tops); 
    })

//展示分頁內容

function showStorage(page){
var storage=window.localStorage;
var str='';
for (var i=2; i <= page; i++) {
    if (localStorage.getItem(i)!='') {
        str+=localStorage.getItem(i);
    } 
}
  $(".pro_list").append(str);

}

//最後就是展示的效果

//先展示儲存本地的資料,然後滑動

$(doucment).ready(funciont(){

     var storage=window.localStorage;
     var key_arrs=new Array();
     for (var i = storage.length - 1; i >= 0; i--) {
        key_arrs.push(parseInt(localStorage.key(i)));
     }
     
     var pageNum=0;
    if (storage.length>0) {
        
        pageNum=max(key_arrs);//這個是自己的方法,返回最大頁數
        if (pageNum>storage.length+1) {
            var storages=window.localStorage;
            for (var i = storages.length - 1; i >= 0; i--) {
                localStorage.removeItem(localStorage.key(i));
            }
            sessionStorage.removeItem('offsetTop');
            page=2;
        }else{
            showStorage(pageNum);
            page=parseInt(pageNum)+1;
        }
    }

//自動滑動到指定位置

var _offset = sessionStorage.getItem("offsetTop");

$(document).scrollTop('offsetTop');$('html, body').animate({  scrollTop: _offset  },10);

});

//分頁

var clickState = 0;

$(window).scroll(function () {


    var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
 
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if(page_flag){
      if (scrollTop + windowHeight == scrollHeight) {
            //獲取所有key
            var storage=window.localStorage;
            var key_arr=new Array();
             for(var i=0;i<storage.length;i++){
                key_arr.push(storage.key(i));
             }
            var bool= $.inArray(''+page+'',key_arr);
            if (bool<0) {
               if (clickState==1) {


               }else{
                    clickState=1;
                    ajax_goods(page);
                    page++;
               }
            }else{
                var storage=window.localStorage;
                for (var i = storage.length - 1; i >= 0; i--) {
                        localStorage.removeItem(localStorage.key(i));
                }
            }
      }
  } 
  

});

功能基本上能實現了,使用方式全看個人的,如果有更好方式麻煩分享下哦