将元素移动到页面顶部vue3示例（scrollIntoView方法）

scrollIntoView方法可以实现将元素移动到可滚动祖先容器的顶部

scrollIntoView方法具体用法官网：MDN中的介绍

demo（将元素平滑过渡到滚动区域顶部）:

<template>
  <div class="page">
    <div class="content">
      <div>
        <div class="area1" ref="area1" @click="go(1)">区域1</div>
      </div>
      <div class="area2" ref="area2" @click="go(2)">区域2</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let area1 = ref()
let area2 = ref()

const go = (num: number) => {
  switch (num) {
    case 1:
      area1.value.scrollIntoView({ behavior: 'smooth' })
      break
    case 2:
      area2.value.scrollIntoView({ behavior: 'smooth' })
      break
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 600px;
  height: 800px;
  border: 1px solid red;
  padding: 20px;
  .content {
    width: 500px;
    height: 600px;
    background-color: antiquewhite;
    overflow: scroll;
    .area1 {
      width: 200px;
      height: 800px;
      background-color: red;
    }
    .area2 {
      width: 200px;
      height: 800px;
      background-color: pink;
    }
  }
}
</style>

tab.scrollIntoView（）; // 等同于tab.scrollIntoView(true)
tab.scrollIntoView（alignToTop）; //布尔参数
tab.scrollIntoView（scrollIntoViewOptions）; //对象参数

参数：
scrollIntoViewOptions，一个包含下列属性的对象。

behavior定义过渡动画，默认值为auto。
        auto，表示没有平滑的滚动动画效果。
        smooth，表示有平滑的滚动动画效果。

block定义垂直方向的对齐，默认值为start。
        start，表示顶端对齐。
        center，表示中间对齐。
        end，表示底端对齐。
        nearest：如果元素完全在视口内，则垂直方向不发生滚动。
注：如果元素未能完全在视口内，则根据最短滚动距离原则，垂直方向滚动父级容器，使元素完全在视口内。

inline定义水平方向的对齐，默认值为nearest。
        start，表示左端对齐。
        center，表示中间对齐。
        end，表示右端对齐。
        nearest：如果元素完全在视口内，则水平方向不发生滚动。
注：如果元素未能完全在视口内，则根据最短滚动距离原则，水平方向滚动父级容器，使元素完全在视口内。

alignToTop：
        当传入参数true时，相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}
        当传入参数false时，相当于{behavior: ‘auto’, block: ‘end’, inline: ‘nearest’}
        当未传入参数时，默认值为：{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}