页面跳转，A跳到B，B再返回A时自动定位到离开A时的位置

Posted 2020-11-21 longxia777

 

<template>
  <div class="hello"  @scroll="scrollLoad" id="myScrollBox">
    <h1>{{ msg }}</h1>
    <ul>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
    </ul>
    <button @click="goForward">go 2</button>
    <ul>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
      <li class="my-li">aaaaaaaaa</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "this is hello 1 !",
      lengthToTop: 0
    };
  },

  beforeRouteLeave(to, from, next) {
    this.recordViewPortPosition();
    next();
  },

  mounted: function() {
    this.setViewPortPosition();
  },

  methods: {
    goForward: function() {
      this.$router.push("h2");
    },

    // 获得距离顶部的位置，暂存一个变量里
    // 本方法配合recordViewPortPosition、setViewPortPosition使用
    scrollLoad: function() {
      let box = document.getElementById("myScrollBox");
      this.lengthToTop = box.scrollTop;
    },

    // 离开首页时记录距离顶部的位置，存到sessionStorage里，方便回来时取用
    recordViewPortPosition: function() {
      sessionStorage.lengthToTop = this.lengthToTop;
    },

    // 离开首页再返回时，重新定位到离开时的位置
    setViewPortPosition: function() {
      let lengthToTop = sessionStorage.lengthToTop;
      if (lengthToTop === null || lengthToTop === undefined) {
        lengthToTop = 0;
      }
      document.getElementById("myScrollBox").scrollTop = lengthToTop; // 距离顶部100px就直接写scrollTop = 100, 不要写100+“px”
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
li {
  display: block;
  height: 100px;
  width: 300px;
  border: 1px solid #000;
  font-size: 15px;
}
</style>