<template>
? <div>
? ? ? <h1>這是樓層測(cè)試的頁(yè)面</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>
? ? ? <!-- 這是樓層的內(nèi)容 -->
? ? ? <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');
? ? ? ? ? ? // 注冊(cè)滾動(dòng)監(jiān)聽(tīng)事件
? ? ? ? ? ? window.onscroll = function() {
? ? ? ? ? ? ? ? // 獲取滾動(dòng)條距離頁(yè)面底部的距離
? ? ? ? ? ? ? ? var tops = document.documentElement.scrollTop || document.body.scrollTop;
? ? ? ? ? ? ? ? // console.log(tops)
? ? ? ? ? ? ? ? //判斷滾動(dòng)的位置，從而改變樓層選項(xiàng)的樣式
? ? ? ? ? ? ? ? for(var i = 0; i < inner.length; i++) {
? ? ? ? ? ? ? ? ? ? if(inner[i].offsetTop <= tops+200 && tops<=inner[i].offsetTop) {
? ? ? ? ? ? ? ? ? ? ? ? that.num=i
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? },
? ? methods: {
? ? ? ? // 樓層跳轉(zhuǎn)的方法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>