javascript - 下拉加载更多，点击某个数据进去后，如果返回到上一次加载更多的位置？

Question

问题如题，
环境：移动端
需求：下拉实现加载更多数据（下拉分页），点击某项数据进入后，如果返回如何返回至上一次加载更多的位置。想了很多办法没有实现...

求解，有什么更好的方法。

图例

如上图，点击返回后正常会跳转数据列表页的顶部，有什么办法可以实现返回至列表20位置处

Answer 1

试试#锚点，假设列表页叫list.html，渲染列表时为每一个item添加一个id锚点，然后点击跳转的时候加url参数，比如item_info.html?callback_pos=#list18，返回时，先读取url上的锚点，设置url参数，list.html#list18，这样就可以自动跳转了，要注意的是，DOM中必须要有对应元素才能跳转

Answer 2

React大法好，用hashroute的话，可以通过修改相关API的回调函数，返回到记录的offsetTop值

Answer 3

要返回到对应数据和位置，需要两点：
a.在跳转之前保存对应数据（列表中所有已经加载的数据）;这一点可以使用localStorage存储，返回后再将localStorage中存储的数据重新渲染到列表；
b.跳转前还需要保存对应元素滚动的位置，返回时才能通过#锚点跳到上次位置;这个可以通过url参数，将其传到后面页面，返回时再读取url参数（通过#锚点方式跳到对应位置），如果不想使用url参数方式，也可使用localStorage存储。

仅提供思路，具体没有试过，你可以参考。

Answer 4

我也是通过锚点的办法实现的