点击按钮滑动到对应的div

最新推荐文章于 2022-12-26 10:36:37 发布

原创最新推荐文章于 2022-12-26 10:36:37 发布 · 550 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用Vue.js实现平滑滚动到页面中指定元素的方法。通过点击按钮，可以将页面滚动到对应的预定义内容区域，同时伴有平滑过渡效果。此技术常用于长页面导航，提供更好的用户体验。

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