滚动到元素的 gsap 菜单仅按预期向下移动，而不是向上移动

Question

我有一个页面使用 gsap 动画滚动。

为了导航，菜单设置了一个简单的“滚动到 ID”方法，该方法被 gsap 拦截以进行滚动。

这可以按预期向下滚动页面，但不能向上滚动。但是，如果您向下滚动页面，从菜单中选择上面的元素不会向上滚动。但是从当前元素向上选择一个元素 2，然后向上滚动 1 个元素。

代码示例；

  <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
    </ul>
  </nav>

  <section id="section1" class="panel">
  </section>

gsap.utils.toArray("nav a").forEach(function(a) {
    a.addEventListener("click", function(e) {
        e.preventDefault();
        gsap.to(window, {duration: 1, scrollTo: e.target.getAttribute("href")});
    });
});

演示是here on codepen

Answer 1

这是一个逻辑问题。一旦您滚动过某个部分，该元素就会向下移动 100vh。因此，当您导航到它的 y 偏移量时，它比开始时的位置低 100vh。

有多种修复方法。最简单的方法可能是保留原始偏移量值的数组，然后滚动到这些值。 Demo.

旁注：

当您不需要进一步限定范围时，您可以只使用选择器字符串作为 GSAP 中的目标。
CSS.

::

如果您打算在某些地方使用 ES6 功能，例如 const，您不妨在整个代码中使用它们。
您更有可能在 the GreenSock forums 更快地获得帮助。

滚动到元素的 gsap 菜单仅按预期向下移动，而不是向上移动

gsap menu to scroll to elements only moves down as expected, not up

javascript

gsap