Vue3网站锚点定位

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

一、样式布局

javascript 复制代码

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

Vue3网站锚点定位

一、样式布局

二、样式效果