vue實現樓層跳轉效果

<template>
  <div>
      <h1>這是樓層測試的頁面</h1>
      <!-- 這是流程的目錄 -->
      <div class="totalM">
          <div class="menu" @click="jump(0)" :class="[num==0?'sele':'']">1</div>
          <div class="menu" @click="jump(1)" :class="[num==1?'sele':'']">2</div>
          <div class="menu" @click="jump(2)" :class="[num==2?'sele':'']">3</div>
          <div class="menu" @click="jump(3)" :class="[num==3?'sele':'']">4</div>
          <div class="menu" @click="jump(4)" :class="[num==4?'sele':'']">5</div>
      </div>
      <!-- 這是樓層的內容 -->
      <div>
        <div class="h-800" style="background:red;"><h1>1</h1></div>
        <div class="h-800" style="background:yellow;"><h1>2</h1></div>
        <div class="h-800" style="background:blue;"><h1>3</h1></div>
        <div class="h-800" style="background:black;"><h1>4</h1></div>
        <div class="h-800" style="background:pink;"><h1>5</h1></div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            num:0,
        }
    },
    created() {
        var that=this
        var inner = document.getElementsByClassName('h-800');
            // 註冊捲動監聽事件
            window.onscroll = function() {
                // 獲取卷軸距離頁面底部的距離
                var tops = document.documentElement.scrollTop || document.body.scrollTop;
                // console.log(tops)
                //判斷捲動的位置，從而改變樓層選項的樣式
                for(var i = 0; i < inner.length; i++) {
                    if(inner[i].offsetTop <= tops+200 && tops<=inner[i].offsetTop) {
                        that.num=i
                    }
                }
            }

    },
    methods: {
        // 樓層跳轉的方法index
        jump(index){
            this.num=index
            var body = document.getElementsByTagName('body')[0];
              // 獲取所有的樓層
            var inner = document.getElementsByClassName('h-800');
            console.log(body)
            console.log(inner)
            console.log(index)
            console.log(inner[index].offsetTop)
            window.scrollTo(0,inner[index].offsetTop)
            // document.body.scrollTop=inner[index].offsetTop
            console.log(body.scrollTop)
        }
    },

}
</script>

<style scoped>
.h-800{
    width: 100%;
    height: 500px;
}
.totalM{
    position: fixed;
    width:100px;
    background:gray;
    right:100px;
    bottom:100px;
}
.menu{
    /* margin-bottom:10px; */
}
.sele{
    background:white;
}
</style>