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="https://unpkg.com/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