<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>

頁面跳轉，A跳到B，B再返回A時自動定位到離開A時的位置