vue利用window.scrollTo快速实现锚点定位
页面部分
<div id="app"><ul class="menus"><li v-for="(item,index) in menusData" :key="index" @click="meuns(index)">{{item}}</li></ul><div id="main_0">内容一</div><div id="main_1">内容二</div><div id="main_2">内容三</div></div>
这里主要功能实现,css就不写了
<script type="text/javascript" src="/vue@2.7.14/dist/vue.js"></script><script>new Vue({el:'#app',data:{menusData:['导航一','导航二','导航三',]},mounted(){},methods:(){//点击导航,进行锚点定位滑动meuns(id){let pageId = document.querySelector("#main_" + id);window.scrollTo({top:pageId.offsetTop, //y 上线left:0,//x 左右behavior:'smooth',//属性值:默认值auto(相当于instant)、平滑滚动smooth、瞬间滚动instant});},},watch:{}})</script>
关于Window.scroll()的详细介绍可参考文档:Window.scroll() - Web APIs | MDN