Vue3+ts 跳转页面 定位到某个位置 scrollIntoView 锚点滚动
时间: 2023-06-02 13:02:47 浏览: 952
微信小程序-scroll-view滚动到指定位置(类似锚点)
可以通过以下方式在 Vue3 中实现跳转页面并定位到某个位置的滚动效果:
1. 在目标位置添加一个具有唯一标识的元素(例如 `<div id="target"></div>`),作为锚点。
2. 在跳转页面的组件中,引入 `ref` 和 `onMounted`,并使用 `scrollIntoView` 方法实现滚动:
```typescript
<template>
<div ref="target" id="target">目标位置</div>
<button @click="scrollToTarget">跳转到目标位置</button>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
setup() {
const targetRef = ref(null)
const scrollToTarget = () => {
targetRef.value?.scrollIntoView({ behavior: 'smooth' })
}
onMounted(() => {
if (location.hash === '#target') {
scrollToTarget()
}
})
return {
targetRef,
scrollToTarget,
}
},
})
</script>
```
在 `onMounted` 钩子函数中判断当前页面是否包含 `#target` 锚点,如果有则执行 `scrollToTarget` 方法,实现自动滚动到目标位置的效果。
阅读全文