html5 产品列表点击其中一个产品进入产品详情,从产品详情页面返回到产品页面,要实现点击回到那个产品的位置

html5 产品列表点击其中一个产品进入产品详情,从产品详情页面返回到产品页面,要实现点击回到那个产品的位置

阅读 6.1k
4 个回答

比较老式但比较简单的办法是:在列表页每个项目上加一个锚点,例如:

/xxxxx/xxxxx/list
<li id="item_001" ...>...</li>
<li id="item_002" ...>...</li>
<li id="item_003" ...>...</li>

然后在详情页面的返回列表的链接上加上锚点

/xxxxx/xxxxx/detail_002
<a href="/xxxxx/xxxxx/list#item_002">返回列表页</a>

类似方法还有很多,不过这种方法兼容性最强,而且容易实现

跳转前记录点击位置存在比如localStorage里,返回列表页的时候取出localStorage里的位置,然后滚动到该位置,然后清掉localStorage
这样做的话如果列表页是分页加载的,还需要处理分页数据

history.back();
history.go(-1);
go()的参数正数为前进,负数为后退,0为刷新

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题