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

wytraining

已于 2022-09-06 17:01:02 修改

阅读量632

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-08-02 17:03:30 首次发布

本文链接：https://blog.csdn.net/wytraining/article/details/126125646

版权

vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Vue.js实现列表中的‘查看详情’按钮，通过锚点跳转到详情部分并保持页面URL不变。关键点包括利用`v-for`遍历生成唯一ID的元素，以及`scrollIntoView`方法实现平滑滚动。遇到的问题是直接使用`href`会导致URL变化，从而影响页面刷新时的定位。

摘要由CSDN通过智能技术生成

一：需求

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

二：实现方式

1.“查看详情”按钮

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

2.列表：每个详情具有唯一的id（给每个被定位的id加上jump区别）

<div
    v-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 锚点滚动