在DOM曾操作如下
document.querySelector('#需要定位的ID').scrollIntoView(true)
那么在vue下,使用ref获取DOM节点调用该方法,如下是vue3中使用
<template>
<div class="test1" ref="test1">
有内容
</div>
</template>
import {onMounted,ref} from 'vue'
onMounted(()=>{
handleJump();
});
let test1 = ref(null);
const handleJump = ()=>{
console.log(test1);
console.log(test1.value);
console.log(test1.value.scrollIntoView);
test1.value.scrollIntoView(true);
}
其次还可以配置动画效果,例如这样
test1.value.scrollIntoView({
behavior: "smooth", // 定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"
block: "center", // 定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"
inline: "nearest"
});