2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > vue页面中实现锚点的功能 平滑移动至被定位处

vue页面中实现锚点的功能 平滑移动至被定位处

时间:2024-01-03 22:12:27

相关推荐

vue页面中实现锚点的功能 平滑移动至被定位处

一:需求

点击列表中“查看详情”,可以跳转至对应的位置

二:实现方式

1.“查看详情”按钮

<Button @click='goAnchor(row.id)'>查看详情</Button>

2.列表:每个详情具有唯一的id(给每个被定位的id加上jump区别)

<divv-for='(item, index) in file_list':key='index':id='`jump${item.id}`'>具体内容</div>

3.跳转的js方法

// 跳转至详情goAnchor (selector) {const id = `#jump${selector}`this.$el.querySelector(id).scrollIntoView({behavior: 'smooth', // 平滑过渡block: 'start', // 上边框与视窗顶部平齐})},

三:踩过的坑

直接使用href进行跳转,虽然实现了定位的功能,但是改变了url的路径:http://localhost:8080/#/jump434,导致页面在刷新的时候会找不到该页面

<a :href='`#jump${row.id}`'>查看详情</a>

四.实现效果

Vue 跳转页面 定位到某个位置 scrollIntoView 锚点滚动

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