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

vue中使用scrollTo实现锚点定位相关推荐

Vue中如何正常使用锚点定位？
问题: 项目中会有一些功能需要用到锚点定位,比如文章目录.点击标题跳转到正文内容等等.但vue的路由设置默认为hash模式,正常使用a标签的锚点定位,在浏览器刷新/后退/前进时,路由会匹配不上,导致页 ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
vue中的百度地图的搜索定位功能
效果图申请百度地图AK 前往百度地图开放平台控制台 ,登录百度账号,创建应用即得. 封装loadBMap.js文件 /*** 动态加载百度地图api函数* @param {String} ak 百 ...
vue中使用类似html中a标签的锚链接，实现点击定位到当前页面的某个位置
在vue中实现点击文字,定位到当前页面的某个位置,具体实现效果如下图所示: 主要实现方式为: <div @click="toJump1">定位1</div> ...
vue中实现锚点定位
vue中实现锚点定位通过监听滚动事件,高亮显示锚点按钮添加点击事件,根据锚点滚动至对应区域并实现平滑滚动这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的 ...
vue锚点定位（代码通用） - 总结篇
vue锚点定位(应用场景) 当前页面锚点跨页面锚点 hash模式下的锚点 history模式下的锚点应用前提:(重要的事情,说3+1遍) 任意场景.任意代码.任意框架都能对接! 都能采用! 都能 ...
vue中使用锚点x轴y轴
vue中使用锚点(x轴y轴) 需求1:点击左侧导航栏,页面需要滚动到对应的标题.(y轴) 第一步:给中间内容div从第一个开始每一个最外层盒子添加一个class||id一个标识.(不能相同) 第二步: ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
vue中检测敏感词，锚点
当发布文章的时候,标题有敏感词则检测有敏感词的接口成功的时候,写锚点 eg: _this .$alert("检测到标题有敏感词,请修改后再发布", "提示", ...

vue中使用scrollTo实现锚点定位

vue中使用scrollTo实现锚点定位相关推荐

最新文章

热门文章