Vue 3 - 当组件出现时始终滚动到页面上的特定位置

我有一个基本的表单组件，一旦我单击按钮（不使用路由器）就会显示出来。我希望表单显示后，表单的滚​​动位置向下滚动一点（例如 y 轴为 40），但我不完全确定如何实现这一点。有各种各样的例子，但我无法让其中任何一个发挥作用。有人可以建议解决这个问题吗？我也开始使用vue 3。

<template>
    <div class="appointment-wrapper" :class="[showForm ? 'appointment' : 'appointment-success']">
        // Scroll down to a certain point
        // ....
            <form @submit.prevent="validateForm" novalidate>
            // ....
            </form>
        </div>
    </div>
</template>

您可以使用window.scrollTo(0, 40)如果单击按钮后条件为真。

Vue.createApp({
  data() {
    return {
      showForm: true
    }
  },
  mounted() {
     if (this.showForm) window.scrollTo(0, 400) // only demo value - use 40
  }
}).mount('#options-api')

#options-api {
  height: 1000px;
}

<script src="https://unpkg.com/vue@next"></script>
<div id="options-api">
  <h1>hidden title</h1>
</div>