2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > vue中使用scrollTo实现锚点定位

vue中使用scrollTo实现锚点定位

时间:2022-08-10 12:23:25

相关推荐

vue中使用scrollTo实现锚点定位

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。