Nuxt3：当前页面滚动到指定位置

在Nuxt 3中，如果你想让当前页面跳转到指定位置，可以使用scrollIntoView方法。你需要给目标位置的元素添加一个ref引用，然后通过程序调用该ref来执行滚动。

以下是一个简单的例子：

<template><div><!-- 其他内容 --><button @click="scrollToRef2">跳转到指定位置2</button><!-- 目标位置 --><v-list><v-list-item><div ref="targetRef1">目标位置1</div><v-sheet v-for='item in 20' height='h-[20px]'>{item }</v-sheet></div></v-list-item><v-list-item><button @click="scrollToRef1">跳转到指定位置1</button><div ref="targetRef2">目标位置1</div><v-sheet v-for='item in 20' height='h-[20px]'>{item }</v-sheet></div></v-list-item></v-list>
</template><script setup>
import { ref } from 'vue'const targetRef1 = ref(null)
const targetRef2 = ref(null)const scrollToRef1 = () => {scrollToRef1.value.scrollIntoView({ behavior: 'smooth' })
}
const scrollToRef2 = () => {scrollToRef2.value.scrollIntoView({ behavior: 'smooth' })
}
</script>

当点击时会执行scrollToRef函数。该函数通过targetRef1.value.scrollIntoView将视图滚动到带有ref="targetRef1"的元素(需要注意的是目前这方法只支持 div标签 )。scrollIntoView的选项{ behavior: 'smooth' }确保滚动平滑过渡