前端开发中关于div超出固定后，回到div顶部问题是常见的效果之一，无论是电商还是常规网站div滑动效果都是常见效果。

前端开发中使用nuxt4时，关于div滑动到顶部后监听路有变化div会要顶部要如何实现呢？

<template>
	<div class="layout">
		<div class="layout_right flex1" ref="scrollContainer">
			<slot />
		</div>
	</div>
</template>
<script setup>
	import { ref } from 'vue';
	//监听路由变化
	const scrollContainer = ref()
	const route = useRoute()
	watch( route, (newRoute, oldRoute) => {
		console.log("路由变化")
		scrollContainer.value?.scrollTo?.({
		    top: 0,
		    behavior: 'smooth'
		  })
	}, { deep: true } )
</script>
<style lang="scss" scoped>
	.layout_right{
		width:100vw;
		height:2000px
	}
</style>

代码关键点：

    watch监听路由的变化

    scrollContainer.value?.scrollTo改变div距离顶部的距离