javascript - 单页面应用，页面跳转后，返回后，回到当前位置？

Question

业务场景：用vue.js开发单页面应用，当滚动到页面a底部时，点击跳转到下一个页面b，再按返回，页面还是停留在页面a的底部，怎样做？

Answer 1

**以上答案全部作废；哈哈，狂不？**

返回的话，如果前面是个带图列表页，无论怎么返回，都会重载入该列表视图；
也就是说；图片没完全载入的情况下，即便你做了scrollHeight或者scrollTOP，
都无法滚动到指定位置，因为html本身都没有那么长；

**在下angularjs写过一个瀑布流的MALL，就这返回并定位到位置的门槛高到直接挡脸的高度；**
好啦：我当初的解决方案，其实相当简单；A页 - B页这样的话，其实A页和B页是一个视图；
1，当初做的B页是直接接到A页瀑布流的底部;
2，禁用瀑布流；同时记录_ScrollTop到controller；
3，吧瀑布流height:0;
-，返回就是把B页隐藏；（用作复用）；
5，瀑布HEIGHT:AUTO;
6，你返回了；

差不多就这样，偷懒的方法；(￣▽￣)"；
**只要跳视图了，基本触发重载;
所以，就不能触发重载咯**；AB就是一个视图里面了；

Answer 2

没用过vue，不过一般router都会提供一个location改变时的hook，我想是不是可以在这绑定一个函数，里面将scroll重置到最顶上

Answer 3

试试vue-router中的saveScrollPosition

Answer 4

没用过vue。
可以在b页面跳转到a页面来重置，不要使用默认的返回。

Answer 5

scrollHeight 存下来， 进入的时候再去设置scrollHeight 。。

Answer 6

没用过vue，不过我觉得这种状况你应该不能用vue的返回方法，而是重新进入这个页面，这样页面会刷新，就重新回到顶部了。

Answer 7

销毁前获取活动位置
下次进来滚动到相应位置

Answer 8

点击返回的时清除之前的scrollHeight

Answer 9

刚巧做个这个，贴一下我已的一个方案。

整个应用是基于 VUE + WEBPACK
使用了VUE-ROUTER + VUEX

VUE-ROUTER 自身会有栅格钩子函数 data ， activate ，deactivate

当A->B时，记录A中你的列表位置(列表数据是VUEX中的，“.forum-infinite-scroll” 用来定位你的列表)

deactivate ({to, next}) {
  this.pos = $(this.$el).find('.forum-infinite-scroll').offset()
  next()
}

当B->A时，移动到原位置

deactivate ({to, next}) {
  this.pos = $(this.$el).find('.forum-infinite-scroll').offset()
  if (this.pos && this.pos.top < 0) {
    let scroller = $(this.$el).find('.infinite-scroll-bottom')
    setTimeout(()=>{
      this.$nextTick(function () {
        $.refreshScroller()
        scroller.scrollTop(Math.abs(this.pos.top) + 250)
      })
    }, 500)
  }
  next()
}

这里有几个地方需要注意，
一是 this.$nextTick
二是 $.refreshScroller()
缺一不可

Answer 10

其实你把b做成a的子组件就可以了。

这样子a不会进入销毁状态。
具体形如：

<p name="list" v-bind:show="show=='list'">
  <ul>
    <li v-for="item in list">{{item.html}}</li>
  </ul>
</p>
<p name="detail" v-bind:show="show=='detail'">
  <b-component v-bind:data="current"></b-component>
</p>