如何滚动到GSAP scrollTrigger擦洗时间线中的标签

Question

因此，我有这个问题，我有一个scrollTrigger时间线，我想要一个按钮滚动我到一个特定的位置。我试过使用for，但是它不起作用，甚至连ScrollTo插件都缺乏对此的支持

我有一段时间

const tl = gsap.timeline({
        paused: true,
        scrollTrigger: {
          trigger: '.home',
          start: 'top top',
          end: 'bottom+=1000 top',
          pin: true,
          scrub: 0.5,
          markers: true
        },
        defaults: {
          duration: 2
        }
      })
        // Main home animation
        .to(['.left'], {
          clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)',
          ease: 'power1.out'
        }, 'scene')
        // Name scaling animation
        .to(['.name-title'], {
          scale: 0,
          ease: 'power1.out'
        }, 'scene')
        .from(document.getElementById('achievements'), {
          autoAlpha: 0
        }, '-=1.5')
        // Achievements reveal animation
        .from(document.getElementById('achievements').querySelectorAll('.row'), {
          motionPath: {
            path: [
              {
                x: 0,
                y: 100
              }
            ]
          },
          autoAlpha: 0,
          stagger: 0.2,
          ease: 'power3.out'
        }, '-=2')
        .addLabel('achievements')
        // Hide achievements animation
        .to(document.getElementById('achievements').querySelectorAll('.row'), {
          motionPath: {
            path: [
              {
                x: 0,
                y: -100
              }
            ]
          },
          autoAlpha: 0,
          stagger: 0.2,
          ease: 'power3.in'
        }, '+=2')

我在我的home中有一个按钮，可以带我去achievements部分，但是我找不到合适的解决方案。

Answer 1

所以我设计了我自己的解决方案(P.S:我在使用Vue)

scrollTo () {
      const pos = Math.ceil(document.body.scrollHeight * (this.loadTl.labels.achievements / this.loadTl.duration()))
      gsap.to(window, { duration: 2, scrollTo: pos, ease: 'linear' })
    }

loadTl，这里是我的时间线的一个计算属性，我找到了achievements的位置，并使用ScrollToPlugin滚动到那个像素。

，但我正在寻找一种更好的方法来做这件事。