基于ScrollMagic实现4个区块导航链接，如何滚动至场景进度？

嘿，刚好之前做过类似的ScrollMagic导航联动需求，给你梳理一套实操性强的实现步骤，亲测好用～

假设你已经搭建好4个ScrollMagic场景（比如scene1到scene4），还有对应的导航链接（我习惯给每个链接加data-scene属性标记对应场景，比如<a class="nav-link" data-scene="1">区块1</a>），接下来分四步搞定：

1. 给导航链接绑定点击事件 #

先给所有导航链接加点击监听，阻止默认跳转，同时拿到对应场景的索引：

// 抓取所有导航链接
const navLinks = document.querySelectorAll('.nav-link');

navLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    // 从data属性里取场景编号，转成0开始的数组索引
    const sceneIndex = parseInt(link.dataset.scene) - 1;
    // 调用跳转函数
    scrollToScene(sceneIndex);
  });
});

2. 编写核心的场景跳转函数 #

这里的关键是精准计算目标场景的滚动位置，用ScrollMagic控制器的scrollTo方法能实现平滑跳转，比原生滚动更适配ScrollMagic的场景逻辑：

// 先提前声明你的控制器和场景数组（要和你实际代码里的实例对应）
const controller = new ScrollMagic.Controller();
const scenes = [scene1, scene2, scene3, scene4];

function scrollToScene(sceneIndex) {
  const targetScene = scenes[sceneIndex];
  if (!targetScene) return; // 防错处理
  
  // 计算目标滚动位置：触发元素的顶部偏移 + 场景设置的offset
  const triggerEl = targetScene.triggerElement();
  const sceneOffset = targetScene.offset();
  let targetScrollTop = triggerEl.offsetTop + sceneOffset;

  // 👉 如果页面有固定导航栏，一定要减去导航栏高度，避免内容被遮挡！
  const fixedNav = document.querySelector('.fixed-navigation');
  if (fixedNav) {
    targetScrollTop -= fixedNav.offsetHeight;
  }

  // 用ScrollMagic控制器实现平滑滚动到目标位置
  controller.scrollTo(targetScrollTop);

  // 顺便给当前点击的导航加激活样式，提升用户体验
  navLinks.forEach(link => link.classList.remove('active'));
  navLinks[sceneIndex].classList.add('active');
}

如果你需要跳转到场景的指定进度位置（比如场景进行到50%的地方），可以结合场景的duration来计算：

// 比如跳转到场景进度50%的位置
const targetScrollTop = triggerEl.offsetTop + sceneOffset + (targetScene.duration() * 0.5);

3. 同步滚动时的导航状态（可选但推荐） #

为了让交互更完整，建议加上滚动时自动高亮当前可视场景对应的导航，实现双向联动：

scenes.forEach((scene, index) => {
  scene.on('update', function() {
    // 当场景处于激活状态（进度在0-1之间）时，高亮对应导航
    if (this.progress() > 0 && this.progress() < 1) {
      navLinks.forEach(link => link.classList.remove('active'));
      navLinks[index].classList.add('active');
    }
  });
});

4. 几个关键注意点 #

• 确保你的ScrollMagic场景triggerElement、offset、duration这些参数设置正确，不然计算出来的滚动位置会有偏差。
• 如果用了GSAP等动画库配合ScrollMagic，跳转时可以结合GSAP的to方法实现更自定义的滚动动画，比如：

  gsap.to(window, {
    scrollTo: { y: targetScrollTop },
    duration: 0.8,
    ease: "power2.inOut"
  });
  

• 测试时要注意不同屏幕尺寸下的兼容性，尤其是移动端的滚动行为。

这样一套流程下来，点击导航就能精准跳转到对应场景的位置，滚动时导航也会同步高亮，完全满足你的需求～

内容的提问来源于stack exchange，提问作者manwithawp