另一个vue-scroll-to的例子

<template>
  <div class="m-3">
    <ul class="menu">
      <li
        v-for="(item, index) in videoList"
        :key="index"
        v-scroll-to="{ element: '#v' + index, offset: -20 }"
      >
        {{ item.title }}
      </li>
    </ul>

    <div class="top" style="display: inline-block; margin-left: 220px;">
      <el-card
        v-for="(item, index) in videoList"
        :key="index"
        class="mb-4"
        shadow="never"
        :id="'v' + index"
      >
        <div slot="header">{{ item.title }}</div>
        <video controls="controls" width="1280" :src="item.url">
          您的浏览器不支持 HTML5 video 标签。
        </video>
      </el-card>
    </div>
  </div>
</template>
 
<script>
import Vue from "vue";
import VueScrollTo from "vue-scrollto";

Vue.use(VueScrollTo, options);

let options = {
  container: "body", //滚动的容器
  duration: 500, //滚动时间
  easing: "ease", //缓动类型
  offset: 0, //滚动时应应用的偏移量。此选项接受回调函数
  force: true, //是否应执行滚动
  cancelable: true,
  onStart: false,
  onDone: false,
  onCancel: false,
  x: false,
  y: true
};

export default {
  name: "faq",
  data() {
    return {
      videoList: [
        {
          title: "安装读卡器驱动",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%AE%89%E8%A3%85%E8%AF%BB%E5%8D%A1%E5%99%A8%E9%A9%B1%E5%8A%A8.mp4"
        },
        {
          title: "录入小区",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%BD%95%E5%85%A5%E5%B0%8F%E5%8C%BA.mp4"
        },
        {
          title: "单个创建房间",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%8D%95%E4%B8%AA%E5%88%9B%E5%BB%BA%E6%88%BF%E9%97%B4.mp4"
        },
        {
          title: "批量创建房间",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%89%B9%E9%87%8F%E5%88%9B%E5%BB%BA%E6%88%BF%E9%97%B4.mp4"
        },
        {
          title: "新增单元",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%96%B0%E5%A2%9E%E5%8D%95%E5%85%83.mp4"
        },
        {
          title: "新建楼栋",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%96%B0%E5%BB%BA%E6%A5%BC%E6%A0%8B.mp4"
        },
        {
          title: "修改授权手机号码",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E4%BF%AE%E6%94%B9%E6%8E%88%E6%9D%83%E6%89%8B%E6%9C%BA%E5%8F%B7%E7%A0%81.mp4"
        },
        {
          title: "已解绑卡重复使用",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%B7%B2%E8%A7%A3%E7%BB%91%E5%8D%A1%E9%87%8D%E5%A4%8D%E4%BD%BF%E7%94%A8.mp4"
        },
        {
          title: "添加用户卡-使用读卡器读取卡号",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%B7%BB%E5%8A%A0%E7%94%A8%E6%88%B7%E5%8D%A1-%E4%BD%BF%E7%94%A8%E8%AF%BB%E5%8D%A1%E5%99%A8%E8%AF%BB%E5%8F%96%E5%8D%A1%E5%8F%B7.mp4"
        },
        {
          title: "添加用户卡-手动添加卡号",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%B7%BB%E5%8A%A0%E7%94%A8%E6%88%B7%E5%8D%A1-%E6%89%8B%E5%8A%A8%E6%B7%BB%E5%8A%A0%E5%8D%A1%E5%8F%B7.mp4"
        },
        {
          title: "添加管理卡-读卡器读取卡号",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%B7%BB%E5%8A%A0%E7%AE%A1%E7%90%86%E5%8D%A1-%E8%AF%BB%E5%8D%A1%E5%99%A8%E8%AF%BB%E5%8F%96%E5%8D%A1%E5%8F%B7.mp4"
        },
        {
          title: "发布公告-门禁设备端发布",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%8F%91%E5%B8%83%E5%85%AC%E5%91%8A-%E9%97%A8%E7%A6%81%E8%AE%BE%E5%A4%87%E7%AB%AF%E5%8F%91%E5%B8%83.mp4"
        },
        {
          title: "发布通知-手机app端发布",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%8F%91%E5%B8%83%E9%80%9A%E7%9F%A5-%E6%89%8B%E6%9C%BAapp%E7%AB%AF%E5%8F%91%E5%B8%83.mp4"
        }
      ]
    };
  }
};
</script>
 
<style>
.menu {
  position: fixed;
  width: 200px;
  margin: 0;
  padding: 5px 20px;
  list-style: none;
  font-size: 14px;
  background-color: #eee;
}
.menu li {
  cursor: pointer;
  margin: 15px 0;
}
video:focus {
  outline: none;
}
</style>