返回上一頁時返回不到離開時的位置
我遇到的是兩種情況:一種是直接在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));
}
}
}
}
});
功能基本上能實現了,使用方式全看個人的,如果有更好方式麻煩分享下哦