scrollIntoView 锚点定位

这篇文章主要介绍了vue中如何使用scrollIntoView实现锚点定位平滑滚动方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

1.页面代码

因为是循环出来的，所以在id上循环增加标识

<template v-for="item in tableData">
    <div :id="'g'+item.i">
      {{ item.value }}
    </div>
</temlate>

2.js方法

页面需要循环渲染内容，所以需要等它渲染完成后才能进行定位，所以这里加了一个定时器循环查找相关元素，找到后进行定位并且关闭定时器

locationScroller(id) {
    this.$nextTick(() => {
      this.scrollerInterval = setInterval(() => {
        // 通过id找到相关元素
        const prop = document.querySelector(`#g${id}`);
        if (prop) {
          prop.scrollIntoView({
            block: 'center',// 默认跳转到顶部
            behavior: 'smooth'// 滚动速度
          })
          clearInterval(this.scrollerInterval);
        }
      }, 1000)
    })
}