首页 新闻 会员 周边

怎么在新页面中返回到前一页浏览的历史位置?

0
悬赏园豆:20 [已解决问题] 解决于 2015-04-13 13:10

如题干。好像百度贴吧有这个功能。求解,利用什么原理做

Paxster的主页 Paxster | 初学一级 | 园豆:125
提问于:2015-04-10 17:18
< >
分享
最佳答案
1

index.html中有个div, 如:<div id='这里'>,/div>

你跳转回的时候直接到index.html#这里了 就行了。 

这是根据页面元素的ID来, 你也可以在cookie里记录别人的滚动条位置, 返回时读取一次, 用js滚到那位置就行了。 

收获园豆:20
问天何必 | 老鸟四级 |园豆:3311 | 2015-04-10 17:31

我是在div里有一个信息读取的列表list。index.html#XXX没用吧?至于你说的第二种应该是可行的,需要服务器支持吗?

Paxster | 园豆:125 (初学一级) | 2015-04-10 17:39

@paxster: 一二种都需要存储, 可以存储在客户端cookie里, 纯js操作就行了。 

问天何必 | 园豆:3311 (老鸟四级) | 2015-04-10 18:36

@问天何必: 

代码大致是这样的,并且可以获取到scrolltop,但是一返回原来的页面获取到的scrollTop一直是一个296,而且滚动条也没有滚动到296的对应位置,scrolltop并没有根据新的scrolltop而改变,我的页面是在手机app里面展示的。

Paxster | 园豆:125 (初学一级) | 2015-04-11 11:58

@paxster:  我读了三遍, 没读懂………………是返回原页面滚动条没有滚动到296px的位置?

问天何必 | 园豆:3311 (老鸟四级) | 2015-04-11 14:16

@paxster: document.body.scrollTop没起作用, 那就是兼容性问题。 

建议你用jquery, 你可以省很多工作

问天何必 | 园豆:3311 (老鸟四级) | 2015-04-11 16:21

@问天何必: 用了jquery,修改了html的声明文档类型,还是不起作用。你加下我qq

Paxster | 园豆:125 (初学一级) | 2015-04-13 11:53

@paxster: http://www.cnblogs.com/wicub/p/3449833.html

问天何必 | 园豆:3311 (老鸟四级) | 2015-04-13 11:56

@问天何必: 恩,看了,这里面用动画设置代替了scrollTop,但是还是不行。同样是可以获取到scrollTop,但是不能设置。

Paxster | 园豆:125 (初学一级) | 2015-04-13 12:37

@paxster: 其实和scrollTop设置无关了,主要页面是动态加载的,如果scrollTop值大于当前页面的高度,scrollTop就是无效的。采用了iframe解决方案。

Paxster | 园豆:125 (初学一级) | 2015-04-14 12:15
其他回答(2)
0

博主,怎么解决的,求指教

熠森 | 园豆:202 (菜鸟二级) | 2016-02-16 15:17

如果是页面刷新后想回到原来的位置是不太现实的,我是用的浮层,覆盖在原页面的上面的。html5里面貌似有记住网页的页面位置的api,但是ajax动态加载的页面可能还需要你琢磨琢磨。

支持(0) 反对(0) Paxster | 园豆:125 (初学一级) | 2016-02-17 10:48
2

以前也做过差不多的功能,想了好久想到了解决方法,这个方法是一个通过的方法,不需要每个页面都写一次,这是利用cookie完成的,把记录的滚动条的位置放入cookie,下次进入这个页面的时候读取cookie,并设置滚动条位置为cookie中的值,从而让滚动条回到上一次的位置,实现返回上一次浏览的位置,如果多个页面要使用这个功能,那就要定义多个cookie来记录不同页面滚动高度,为了解决这个问题使用了一个相对简单的方法,就是cookie的值是以页面的文件名命名,js中创建cookie时,自动获取网页路径,截取页面的文件名,并将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库,和jquery.cookie.js

代码可能有改进的地方,但能实现效果,ajax动态加载的页面也测试过可用,把代码贴在这里给有需要的人一点帮助

徐书帆 | 园豆:192 (初学一级) | 2016-04-16 09:36

谢谢,帮了我的大忙。

支持(1) 反对(0) qq972666093 | 园豆:205 (菜鸟二级) | 2016-10-11 16:03

@源码交易网:请问/*返回上次浏览位置*/ else后面写什么东西?

支持(0) 反对(0) hexuntao | 园豆:200 (初学一级) | 2016-12-22 11:48

您好 我能问一下 就是 如果 有tab的分栏 并且都是ajax请求的  列表 如果点击详情后返回 不到 那个tab  怎么解决呢?  求帮助啊

支持(0) 反对(0) ftftft | 园豆:200 (初学一级) | 2017-04-21 15:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册