这里只讲思路，不提供代码。
写之前，我要先吐槽一种非常奇葩的写法。 下面是他的写法思路（虽不提倡，但可借鉴）：
一个商品列表，然后把商品详情写在商品列表里。 这是一个页面，两个不一样的div标签，一个div标签是商品列表，另一个div标签是商品详情
从商品列表跳转到商品详情的操作是：
请求商品详情接口，请求到后赋值（在jq项目里特地引了个vue来双向绑定），
把当前页面的高度记录下来（$document.scrollTop()获取高度），
然后把商品列表div标签隐藏掉，然后再显示商品详情div标签。
从商品详情回退到商品列表的操作是：
点击商品详情页面里回退按钮 ，触发toIndex方法，
toIndex方法主要写的是
隐藏商品详情div标签，显示商品列表div标签，并用$("html,body").scrollTop(刚记录的高度) 回退到刚刚的位置
优点：
简单粗暴。
商品详情页，回退到列表，秒回退（回退速度最快，因为是同一个页面。）。
缺点：
以后扩展功能，只能承认自己技术菜，这实现不了，那实现不了，因为我们没有商品详情页。
没有浏览器回退功能。
代码冗余程度：每多一个列表页面，就多上100%。
刷新商品详情页后是商品列表页
上面的写法，是老项目的写法，反正我是很不理解这种写法。
言归正传，我们来讲其他三种不一样的写法吧。（我目前已知的有三种）
一、独立一个商品详情页，商品列表页跳转时需缓存数据和高度。（大多数公司正常的写法，常规写法）
商品详情页和商品列表页是独立的两个页面。
商品列表页到商品详情页的操作：
记录当前列表的高度，并缓存，缓存当前列表的列表数据，缓存到sessionStorage（你也可以根据情况缓存到localStorage，cookie） 然后，location.href 跳转到商品详情页。
商品详情页回退到商品列表页的操作：
商品详情页，直接是浏览器回退，没其他操作。
商品列表页，先通过document.referrer判断来源是不是商品详情页， 如果是，则从缓存里取出列表数据和列表高度。 如果不是，则重新请求接口获取数据。
优点：
1、商品详情页只做商品详情页的事（商品详情页的逻辑统一处理）。
2、刷新商品详情页后，回退到列表页，也记录列表数据和位置。（不知道算缺点还算优点， 可以特殊问题到时候特殊处理。）
缺点：
1、回退到列表页的时候，部分浏览器 ，会有那么一瞬间，先到顶部再到刚刚浏览的高度。
2、如果有个需求是商品详情页跳转到商品列表页的需求，则会跟我们这里的逻辑有冲突。（特殊逻辑到时候特殊处理。）
二、利用template.js模板引擎写一个商品详情页，挂在列表上。 （从上面那种奇葩式写法得到的启发，因为速度最快。 也是我的一种备用方案，真正方案是后面第三种思路。）
template.js模板引擎。写个商品详情的模板。
商品列表引入 template.js、商品详情js模板、商品详情js逻辑、商品详情css
商品列表页到商品详情页的操作：
把当前页面的高度记录下来（$document.scrollTop()获取高度），
请求商品详情接口，请求到后 渲染商品详情模板，然后插入到商品详情的div内。
显示商品详情div标签，隐藏商品列表div标签
商品详情页到商品列表页的操作：
点击商品详情页面里回退按钮 ，触发toIndex方法，
toIndex方法主要写的是
隐藏商品详情div标签并清空商品详情div标签内的内容，显示商品列表div标签，并用$("html,body").scrollTop(刚记录的高度) 回退到刚刚的位置
优点：
商品详情模板只做商品详情页的事（商品详情的逻辑统一处理）。
缺点：
1、没有商品详情页。
2、没有浏览器回退功能。
3、刷新商品详情页后是商品列表页。
三、在第二种的方法上，加上浏览器拦截，扩展一个商品详情页。
第二种方法
1、没有商品详情页。
我们就加一个商品详情页的页面，直接引入template.js、商品详情js模板、商品详情js逻辑、商品详情css。 然后根据url里的参数去请求商品详情接口。
2、没有浏览器回退功能。
利用window的popstate事件， 来拦截浏览器回退和跳转， 拦截到后，使其执行自己的toindex方法。
3、刷新商品详情页后是商品列表页。
利用history的pushState和replaceState方法 来添加或更改 浏览器url地址。
商品列表页到商品详情页的操作：
把当前页面的高度记录下来（$document.scrollTop()获取高度），
请求商品详情接口，请求到后 渲染商品详情模板，然后插入到商品详情的div内。
显示商品详情div标签，隐藏商品列表div标签， 用pushState改成真正的商品详情地址，不跳转（假跳转），添加history浏览记录
商品详情页到商品列表页的操作：
点击商品详情页面里回退按钮 或者 使用浏览器回退功能（会被拦截的）。 触发toIndex方法，
toIndex方法主要写的是
隐藏商品详情div标签并清空商品详情div标签内的内容，显示商品列表div标签，并用$("html,body").scrollTop(刚记录的高度) 回退到刚刚的位置
商品详情页到商品详情页的操作：
请求商品详情接口，请求到后 渲染商品详情模板，然后插入到商品详情的div内。
显示商品详情div标签，隐藏商品列表div标签， 用replaceState替换真正的商品详情地址，不跳转（假跳转），不添加history浏览记录
优点：
1、商品详情模板只做商品详情页的事（商品详情的逻辑统一处理）。
2、有商品详情页，商品详情页独立一个页面。
3、实现浏览器回退功能。
缺点：
1、商品详情页刷新后，回退到列表页，不记录位置。（这算个缺点）