<template>
<div>
<p>
<button @click="showDetails(1)">NO1</button>
<button @click="showDetails(2)">NO2</button>
<button @click="showDetails(3)">NO3</button>
<button @click="showDetails(4)">NO4</button>
<button @click="showDetails(5)">NO5</button>
<button @click="showDetails(6)">NO6</button>
<button @click="showDetails(7)">NO7</button>
</p>
<div style="background:#3FB883" class="listshow1">1111111</div>
<div style="background:#B26031" class="listshow2">2222222</div>
<div style="background:#F0686E" class="listshow3">3333333</div>
<div style="background:#369BEE" class="listshow4">4444444</div>
<div style="background:#FFE793" class="listshow5">5555555</div>
<div style="background:#AC885B" class="listshow6">6666666</div>
<div style="background:#B4177B" class="listshow7">7777777</div>
</div>
</template>
<script>
export default {
data(){
return{
showIndex:null
}
},
methods: {
showDetails(num){
var el=document.getElementsByClassName(`listshow${num}`)[0];
console.log(el.offsetTop);
if(this.showIndex==num){
this.showIndex=null;
}else{
this.showIndex=num;
}
this.$nextTick(function () {
window.scrollTo({"behavior":"smooth","top":el.offsetTop});
})
}
}
}
</script>
<style>
div{
width: 100%;
height:800px;
}
</style>
vue实现点击按钮页面滑动到对应的div
最新推荐文章于 2023-03-05 11:14:55 发布