方法1： 利用ref实现锚点定位
前面的废话文学
说到锚点定位，很多人第一时间会想到 a标签。但是a标签实现的锚点定位并不是那么的完美，特别是在hash模式下。
对我而言，vue3的ref就实在是太完美了。
解决问题的方法
很多情况下，我们会循环一定格式的数据对页面进行渲染，然后再有锚点定位的需求。那么我们该怎么去做呢？
1. setup函数内定义变量
const eleRefs = ref([]);
const setRef = (el) => {
if (el) {
eleRefs.value.push(el);
}
};
//获取变量值
console.log(eleRefs.value[0])
2. 动态获取ref并存放到eleRefs数组当中
<template v-for="(item, index) in data.catalogue">
<div class="part-cont" :id="'part' + item.id" :ref="setRef">
<div class="part-box">
<template v-for="(j, k) in item.picUrls" :key="k">
<img :src="j" alt="">
</template>
</div>
<template v-for="(i, ind) in item.children">
<div :id="'part' + i.id" :ref="setRef" class="part-box">
<template v-for="(j, k) in i.picUrls" :key="k">
<img :src="j" alt="">
</template>
</div>
</template>
</div>
</template>
3. 滚动到特定的ref位置
eleRefs.value[0].scrollIntoView({ block: 'start', behavior: 'smooth' });
over
方法2: 利用a标签实现锚点定位（滚动响应）
第二次的废话文学
小编想了，还是想把a标签的锚点定位也记录一下。
无论是PC端、移动端,还是APP、小程序，只要涉及长篇文章/画册、tab切换等的都可能会有锚点定位的需求。我们前端就需要做到点击锚点能定位，滚动页面能响应。
解决问题的方法
1. a标签 定位到指定位置
// 锚记
<a href="#site">点击此处到目标位置</a>
// 锚记位置
<div id="site"></div>
2.滚动响应
监听滚动事件文章来源：https://www.toymoban.com/news/detail-568050.html
let currSite = document.documentElement.scrollTop || document.body.scrollTop // document.documentElement.scrollTop // 当前滚动位置
let windowHeight =window.innerHeight||document.documentElement.clientHeight || document.body.clientHeight // 视口高度
// 获取元素信息
let ele = document.getElementById('site')
let eleTop = ele.offsetTop // 元素距页面顶部高度（头部）
let eleHeight = ele.clientHeight // 元素高度
let eleBot = eleHeight + eleTop // 元素底部距页面顶部高度（尾部）
/* 判断元素是否在可视区域：
1.元素内嵌可视区域（首尾均在可视区域内）
2.元素外嵌可视区域（首位均在可视区域外）
3.元素头部在可视区域内，尾部在可视区域外
*/
if(eleTop >= currSite &&eleTop < currSite + windowHeight || (eleBot > currSite &&eleBot < currSite + windowHeight) || (eleTop e < currSite && eleBot > currSite + windowHeight)){
// 元素在可视区域
}else{
// 元素不在可视区域
}
over
文章来源地址https://www.toymoban.com/news/detail-568050.html
到了这里，关于【vue3】锚点定位（两种实现方式）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
