前端 - 浏览器点击返回上一页，如何保持之前的状态呢？比如滚动条仍然在最下面

问题描述

问 题

1. 有a页面，比如百度图片。我点了10次加载更多图片按钮。
   意思现在已经向下页面滚动了很多了。

2. 然后我点击了第10页的一场图片，
   然后跳转到了这个图片的页面b。

3. 现在我点击浏览器的返回上一页时候，怎么仍然保持在刚才的第10次加载实的样子，也就是滚动条在很底下的时候，而不是第一次打开百度图片的样子

4. 也就是返回上一页的时候，上一页保持原来的样子

解决方案

我理解需要两点：

1. 首先需要浏览器的返回机制支持，就是说返回的时候上一个页面的所有状态要能够被保留（通过ajax加载的那些图片要都还在）。PC端的浏览器不太了解，反正移动端的浏览器绝大部分都会保留

2. 在满足1的条件下，在跳转之前记录当前滚动的位置，返回的时候读取再滚动到之前记录的位置即可。具体实现我个人存储在sessionStorage里最好，然后监听pageShow事件，每次触发时看sessionStorage里有没有存上次滚动的位置，没有的话说明是第一次进入，有的话就读取值并scroll到对应位置

这篇关于前端 - 浏览器点击返回上一页，如何保持之前的状态呢？比如滚动条仍然在最下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！