移动网站，点击商品列表进入商品详情页，再退回来，怎样回到历史位置？

[Hsinyung]

项目：微信端商城主页。

主页底部商品列表是ajax动态追加的，点击商品列表，进入详情页，再退回主页，需要返回之前点击的位置。

目前是把进入详情页之前的滚动条写入cookie，退回来，根据滚动条垂直滑动到指定的位置。那么问题来了，比如底部列表一共有十页内容，每页20个商品，手机屏幕只能显示4个商品，即一页的商品内容需要滚动五次屏幕才能完全显示完。。

记录滚动条的方法，返回时，如果有分页，垂直滚动后的位置不准，不是之前点击进入的位置。用户体验不好。。


求大神指教。。。。

[Hsinyung]

在线求答案。。

[iGolden]

请问楼主解决了么？我也遇到相同的问题，不知如何处理

[土豆的老公]

用localStorage或者cookies记录上一次位置坐标啊。 或者你打开详细页面的时候，不要覆盖原来的内容，弹出个层就好了，返回的时候，实际是删除或者隐藏这个层。

[Hsinyung]

引用 2 楼 qq_29088015 的回复:

请问楼主解决了么？我也遇到相同的问题，不知如何处理

没有解决。项目撤了，不了了之。但这个问题一直压在心头，盼解决。。

[Hsinyung]

引用 3 楼 Jun552 的回复:

用localStorage或者cookies记录上一次位置坐标啊。 或者你打开详细页面的时候，不要覆盖原来的内容，弹出个层就好了，返回的时候，实际是删除或者隐藏这个层。

体验不好，主页和详情页交互数据多，遮罩层可以解决此需求，但体验不好。。

[当作看不见]

醉了醉了 ,直接使用锚点,返回的时候就跳转到对应的位置了 https://cn.vuejs.org/v2/guide/syntax.html#缩写 例如你访问这个网站 ,后面接了一个锚点,打开就直接跳转到对应位置,

[qq_35269473]

那如果在ajax追加的时候就给每一个图片建立一个锚点呢？

[Hsinyung]

引用 6 楼 qq_29594393 的回复:

醉了醉了 ,直接使用锚点,返回的时候就跳转到对应的位置了 https://cn.vuejs.org/v2/guide/syntax.html#缩写 例如你访问这个网站 ,后面接了一个锚点,打开就直接跳转到对应位置,

ajax追加的，描点解决不了。

[qq_35910538]

我也在做这个功能。。因为ajax是追加的。所以现在是等他加载完再跳到前面点击商品的位置。（这样的问题就是用户体验差）。查了下网上的方法，感觉是商品详情的界面隐藏在商品选择界面这种方法靠谱。但是这样页面就太复杂了。。求好的办法。

[mkmin]

你可以先将数据缓存着，返回页面的时候判定如果有这个数据就不获取，然后scroll到你记录的位置

[Hsinyung]

引用 3 楼 土豆的老公的回复:

用localStorage或者cookies记录上一次位置坐标啊。 或者你打开详细页面的时候，不要覆盖原来的内容，弹出个层就好了，返回的时候，实际是删除或者隐藏这个层。

弹出层可行。也是最后综合比较采纳的办法。

[Hsinyung]

引用 4 楼 shierxi的回复:

[quote=引用 2 楼 qq_29088015 的回复:] 请问楼主解决了么？我也遇到相同的问题，不知如何处理

没有解决。项目撤了，不了了之。但这个问题一直压在心头，盼解决。。[/quote] 弹出层。。。。。。。..。。。。

[Hsinyung]

引用 6 楼 当作看不见的回复:

醉了醉了 ,直接使用锚点,返回的时候就跳转到对应的位置了 https://cn.vuejs.org/v2/guide/syntax.html#缩写 例如你访问这个网站 ,后面接了一个锚点,打开就直接跳转到对应位置,

苗点是解决不了js初始化动态追加数据的问题。。

[風灬雲]

你用什么框架做的，之前有遇到过，vue的话有一个keep-alive组件，可以保持该组件的状态

[Hsinyung]

引用 14 楼 風灬雲 的回复:

你用什么框架做的，之前有遇到过，vue的话有一个keep-alive组件，可以保持该组件的状态

jquery

[86y]

我是通过 localstorage（本地存储） 【jq+html5滚动到底部自动加载数据之(保存数据)】