1. 组件内滚动

1. 组件内滚动到指定锚点 scrollIntoView
   在组件中

<div ref="end">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
// 初始化的化滚动，必须在mounted生命周期中，created 不行
mounted() {
    this.$refs.end.scrollIntoView({
    behavior: "smooth", // 平滑过渡
    block: "start" // 上边框与视窗顶部平齐。默认值
});
}

2. 组件内滚动到指定位置
   初始化的化滚动，必须在mounted生命周期中，created 不行
   在组件中

document.documentElement.scrollTop = 100 // 不加单位

2， 路由滚动

1. 进入目标路由滚动到指定位置，只有当内容超出页面出现滚动时才生效
   场景：目标路由可能先打开并缓存过，再次进入目标路由需要回滚到最上面
   在路由文件中配置

const router = new Router({
  routes,
  scrollBehavior(to, from, savedPosition) {
    console.log(to);
    // return 期望滚动到哪个的位置
    return {
      x: 0,
      y: 0,
      behavior: "smooth" // 平滑滚动
    };
  }
});

2. 进入目标路由滚动到目标路由的指定锚点，只有当内容超出页面出现滚动时才生效
   场景：进入目标路由指定滚动到某个锚点

参数解析：
savedPosition: 点击浏览器的前进回退才生效，获取滚动条的位置 
to.hash ：获取目标路由的自定义hash值，在目标路由的url后拼接 #目标路由位置 
点击路由跳转时 to.hash 的值是 目标路由位置 

在路由文件中

const router = new Router({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (to.hash) {
        return {selector: to.hash}
      }
    }
  }
});

在跳转前的路由组件中，设置path的hash值

this.$router.push({
  path: "/group2/page1#position"
});

在目标组件中，定义锚点位置，必须是id

<div id="position" style="background:red">锚点位置</div>

3. 过渡动画

1. 路由动画

1. 在index.html中引入animate的cdn动画库

<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">

2. 在 路由出口组件中

<transition
      :duration="1000"
      mode="out-in"
      appear
      appear-active-class="fadeIn"
      enter-active-class="fadeIn"
      leave-active-class="fadeOut" 
    >
      <router-view class="animated"></router-view>
    </transition>

2. 组件动画

1. 在index.html中引入animate的cdn动画库

<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">

2. 在组件中使用

• 动画触发条件：显隐的时候触发，添加animate类的时候触发
• 规范：class 中 animate__animated 是必须写的，后面的类是效果类，可在官网右侧列表体验效果，拷贝的类名放置于animate__animated后，此动画即可生效

<template>
  <div>
    <h1 @click="show = !show">
      显隐触发
    </h1>
    <div class="animate__animated animate__bounce" v-if="show">
      动画内容
    </div>
    <h1 @click="add = !add">
      添加animate类时触发
    </h1>
    <div :class="{ animate__animated: add, animate__bounceIn: add }">
      动画内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      add: false
    };
  }
};
</script>