页面跳转后返回原页面回到原页面跳转前的位置怎么实现?

移动端A页面用了iscroll插件滚动显示订单,通过几次ajax加载更多的订单后点击订单详情跳转到订单详情B页面,要求是从B页面返回时(如安卓手机点击安卓手机的返回键)不刷新页面并停留在点击订单详情的那个订单的位置上?用了history,onbeforeunload好像都实现不了,如果A页面没经过ajax加载更多怎么实现,若加载了几次又怎么实现呢

4个回答

你这必须要把当前页面的滚动条位置存下来,存到cookie或者localstorage都可以,然后返回到该页面的时候查这个值让滚动条下滑,如果有分页的话那就
在ajax数据请求完成里面还要加判断,判断当前的scrollTop是否等于你之前存的值,如果不等于还要继续请求

playboyanta123
show_code scrollTop不是只有body才有,只要出现滚动条的会计元素都可以有,只不过iscroll每次异步加载完了要fresh一下,iscroll自带的方法
大约 3 年之前 回复
playboyanta123
show_code 回复lxlxlxlxcool: app不一样,app可以直接把上一页整个页面缓存起来,相当于没动一样,但是web页面是不行的,isroll用我说的做法也可以的
大约 3 年之前 回复
lxlxlxlxcool
lxlxlxlxcool 感谢回答,我的滚动用iscroll插件,所以scrollTop没用,记录滚动加载数据这思路除外,可以不通过js记录滚动并加载数据而直接用浏览器的history对象操作读取副本吗?我看很多手机浏览器或APP类似业务场景都是返回直接回原位置而没有滚动的操作的
大约 3 年之前 回复

/*返回上次浏览位置*/
$(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库,和jquery.cookie.js

BestLuckBoy
BestLuckBoy 不行啊,我复制过来的,我的是vue的单页面应用
大约 3 年之前 回复
lxlxlxlxcool
lxlxlxlxcool 谢回答,我最后采用的方法与你的类似,用sessionStorage存的了,但是可以不通过js记录滚动并加载数据而直接用浏览器的history对象操作读取副本吗,我看很多手机浏览器或APP类似业务场景都是返回直接回原位置而没有滚动的操作的
大约 3 年之前 回复

我当初用的方法是:获取当前滚动条高度,作为一个传送参数,在当前页面获取参数,若是为null不做处理,不为null跳到指定高度,瀑布流的话就是判断加载的高度对比数据

lxlxlxlxcool
lxlxlxlxcool 谢回答,记录滚动加载数据这思路除外,可以不通过js记录滚动并加载数据而直接用浏览器的history对象操作读取副本吗?我看很多手机浏览器或APP类似业务场景都是返回直接回原位置而没有滚动的操作的
大约 3 年之前 回复

谢谢各位的回答,问题最新进展是可以通过记录数据及滚动位置使回到这个页面时自动滚动,但是问题发生的原因是一些浏览器如微信返回页面时会强制刷新页面,有办法让它不刷新吗?

congmingzhu123
congmingzhu123 回复weixin_43641458: 在ajax数据请求完成里面还要加判断,判断当前的scrollTop是否等于你之前存的值,如果不等于还要继续请求,请问实现了喵
一年多之前 回复
weixin_43641458
weixin_43641458 博主,请问有这个记录数据和滚动记录的demo嘛?借鉴学习一下,最近遇到这个问题,解决不了啊
一年多之前 回复
BestLuckBoy
BestLuckBoy 博主问题解决了吗?可以告诉我都需要些什么,在哪里写吗?我也遇到了这个问题
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问