网站上实现锚点定位的方法有很多，今天介绍vue3实现的定位效果的方式。通过scrollIntoViewh函数的行为，滑动至指定的容器。

一、样式布局

<template>
<div  style="width: 100%; display: flex;flex-direction: column;"><div style="display: flex;flex-direction: row; height: 48px; width: 100%;background-color: cadetblue;"><div @click="handleAnchor('JinYong')"  style="height: 40px;padding: 10px;">金庸</div><div @click="handleAnchor('GuLong')" style="height: 40px;padding: 10px;">古龙</div><div @click="handleAnchor('LiangYuSheng')" style="height: 40px;padding: 10px;">梁羽生</div><div @click="handleAnchor('WenRuiAn')" style="height: 40px;padding: 10px;">温瑞安</div><div @click="handleAnchor('HuangYi')" style="height: 40px;padding: 10px;">黄易</div></div><div ref="JinYong" style="height: 600px;width: 100%; background-color: blueviolet;"><span style="display: block; margin: 10px;font-size: larger;">书剑恩仇录 雪山飞狐</span></div><div ref="GuLong" style="height: 600px;width: 100%; background-color:brown;"><span style="display: block; margin: 10px;font-size: larger;">边城浪子 风云第一刀</span></div><div  ref="LiangYuSheng" style="height: 600px;width: 100%; background-color:chocolate;"><span style="display: block; margin: 10px;font-size: larger;">白发魔女传  塞外传奇</span></div><div ref="WenRuiAn" style="height: 600px;width: 100%; background-color:darkgray;"><span style="display: block; margin: 10px;font-size: larger;">四大名捕 逆水寒</span></div><div ref="HuangYi" style="height: 600px;width: 100%; background-color:lightgreen;"><span style="display: block; margin: 10px;font-size: larger;">大唐双龙转 寻秦记</span></div>
</div>
</template><script setup>
const { proxy } = getCurrentInstance()function handleAnchor(herf){proxy.$refs[herf].scrollIntoView({ behavior: 'smooth' })
}
</script>

二、样式效果