vue实现点击按钮页面滑动到对应的div

绝地灬酷狼 2022-10-24 15:21 142阅读 0赞

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