vue循环实现锚点点击并平滑过渡

345 阅读1分钟

中秋倒计时4天

项目场景:

pc端项目左侧为题目序号,点击左侧题目序号 右侧中心内容平滑过度到[锚点]点击位置

123.jpg

问题描述:

左边和右边都是同一数组v-for 循环出来的 css实现不了

解决方案:

循环给每一个添加点击事件并传入id名称加动态index拼接

image.png

image.png

js

 goAnchor(selector) {
      var anchor = this.$el.querySelector(selector)
      anchor.scrollIntoView({
        behavior: 'smooth',
        // 定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"
        block: 'center',
        // 定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"
        inline: 'nearest',
        // 定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
      })
    },