好的使用vue3上述咋写

在Vue 3中实现动画过渡滚动到固定高度的效果，您可以使用Vue的`transition`组件和`scroll-behavior`属性来实现。以下是一个示例：

HTML:

<template>
  <div>
    <button @click="scrollToTop">滚动到顶部</button>
    <transition name="fade">
      <div class="content" v-show="showContent">这是一些内容...</div>
    </transition>
  </div>
</template>

CSS:

.content {
  height: 1000px; /* 设置内容的高度 */
  overflow-y: scroll; /* 允许内容出现滚动条 */
  scroll-behavior: smooth; /* 启用平滑滚动效果 */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s; /* 设置过渡动画的持续时间 */
}

.fade-enter,
.fade-leave-to {
  opacity: 0; /* 设置初始和最终状态的透明度 */
}

Vue组件:

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showContent = ref(true);

    const scrollToTop = () => {
      showContent.value = false;

      setTimeout(() => {
        window.scrollTo({
          top: 0, /* 滚动到顶部的位置 */
          behavior: 'smooth' /* 使用平滑滚动效果 */
        });

        showContent.value = true;
      }, 500); // 等待过渡动画完成后再滚动到顶部
    };

    return {
      showContent,
      scrollToTop
    };
  }
};
</script>

在上面的示例中，我们使用了Vue 3的`ref`函数来创建响应式的`showContent`变量，控制内容的显示和隐藏。当点击"滚动到顶部"按钮时，我们首先将`showContent`设置为`false`，触发内容的淡出过渡动画。然后使用`setTimeout`延迟500毫秒，等待过渡动画完成后，再使用`window.scrollTo`方法将页面滚动到顶部位置，并将`showContent`重新设置为`true`，触发内容的淡入过渡动画。

请注意，上述示例中使用了简单的延迟来等待过渡动画完成，实际项目中可能需要根据具体情况进行调整。另外，您可以根据需要修改内容的高度和过渡动画的样式。