JS返回页面时自动回滚到历史浏览位置

 更新时间:2018年09月26日 10:27:31   作者:丁俊杰_  
这篇文章主要介绍了JS返回页面时自动回滚到历史浏览位置的相关知识,本文给大家使用的是SessionStorage来存储页面内容,在返回页面时重新加载,具体实现代码大家跟随小编一起看看吧

在我的系统实际开发过程中遇到一个需求,我需要让应用在各个页面间跳转时回到每页原先浏览到的位置,方便用户使用。

在网上查资料时,看到的方案有不少,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆按自己的想法用SessionStorage写了一个缓存页面的方法,在离开页面时将需要缓存的容器中所有内容都存到SessionStorage中,在返回页面时重新加载,方便用户操作,效果如下:

页面缓存

使用方法

用法也很简单,咱一步一步讲。

首先,在你需要缓存标签容器的类名中加入cache,并写一个name作为该容器的唯一标记,示例如下:

<div class="weui-tab cache" name="index">
 ....
</div>

其次,声明全局变量,获取缓存内容和容器,示例如下:

var cache;
var cacheId = $(".cache").attr("name");

随后,在页面加载时调用缓存,在离开页面时生成缓存,代码如下:

window.onload = function () {
 //载入缓存的列表
 loadCache(cacheId);
}

window.onunload = function () {
 //可以通过needCache这个flag来控制是否需要缓存
 if (localStorage.needCache == 'true') {
  //离开页面时生成缓存
  createCache(cacheId);
 }
}

/* *
 * @brief 可对指定多个控件进行内容和位置的缓存
 * @param cacheId 缓存元素的id
 * @return null
 * */
function createCache(cacheId) {
 //对内容进行缓存
 var list = [];
 var listController = $('.cache');
 $.each(listController, function (index, value, array) {
  list.push(value.innerHTML);
 })
 //对浏览到的位置进行缓存
 var top = [];
 var topController = $(".cache").find(".top");
 $.each(topController, function (index, value, array) {
  top.push(value.scrollTop);
 })
 //存入sessionstorage中
 sessionStorage.setItem(cacheId, JSON.stringify({
  list: list,
  top: top
 }));
}

/* *
 * @breif 可对指定多个控件加载缓存
 * @param 加载缓存的id
 * @return null
 * */
function loadCache(cacheId) {
 //一定要放在整个js文件最前面
 cache = sessionStorage.getItem(cacheId);
 if (cache) {
  cache = JSON.parse(cache);
  //还原内容
  var listController = $('.cache');
  $.each(listController, function (index, value, array) {
   value.innerHTML = cache.list[index];
  })
  //还原位置
  var topController = $(".cache").find(".top");
  $.each(topController, function (index, value, array) {
   value.scrollTop = cache.top[index];
  })
 }
}

大部分都可以直接copy,再根据你的需要改进一下,就可以很好的使用了。

github传送地址: https://github.com/JunJieDing666/YouZhiGou

总结

以上所述是小编给大家介绍的JS返回页面时自动回滚到历史浏览位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 可视化埋点平台元素曝光采集intersectionObserver思路实践

    可视化埋点平台元素曝光采集intersectionObserver思路实践

    这篇文章主要为大家介绍了可视化埋点平台元素曝光采集的思路—intersectionObserver的实战经验详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JS实现页面进入和返回定位到具体位置

    JS实现页面进入和返回定位到具体位置

    其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能,返回定位到具体位置有两种方法,下面通过场景分析给大家详细讲解,需要的的朋友参考下
    2016-12-12
  • 微信小程序自定义弹出层效果

    微信小程序自定义弹出层效果

    这篇文章主要为大家详细介绍了微信小程序自定义弹出层效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 原生js实现的贪吃蛇网页版游戏完整实例

    原生js实现的贪吃蛇网页版游戏完整实例

    这篇文章主要介绍了原生js实现的贪吃蛇网页版游戏完整实例,可实现自主选择游戏难度进行贪吃蛇游戏的功能,涉及javascript键盘事件及页面元素的操作技巧,需要的朋友可以参考下
    2015-05-05
  • ie9 提示''console'' 未定义问题的解决方法

    ie9 提示''console'' 未定义问题的解决方法

    关掉开发者工具之后,在状态栏发现提示'console' 未定义,为什么之前的运行没有问题,之后的就不行呢
    2014-03-03
  • js制作支付倒计时页面

    js制作支付倒计时页面

    这篇文章主要为大家详细介绍了js制作支付倒计时页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 一文读懂ES7中的javascript修饰器

    一文读懂ES7中的javascript修饰器

    这篇文章主要给大家介绍了关于ES7中javascript修饰器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ES7具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • 使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

    使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

    sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作
    2016-03-03
  • Js调用Java方法并互相传参的简单实例

    Js调用Java方法并互相传参的简单实例

    下面小编就为大家带来一篇Js调用Java方法并互相传参的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 微信小程序表单弹窗实例

    微信小程序表单弹窗实例

    这篇文章主要为大家详细介绍了微信小程序表单弹窗实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07

最新评论