多次滚动到一个锚点

Question

我正在尝试编写一个小函数，它使用 GSAP 在另一个动画完成后滚动到锚点。

我遇到的问题是脚本第一次运行完美，滚动到正确的位置，但是当第二次调用该函数时，溢出会滚动回页面顶部。

据我了解，这是因为在第二次调用该函数时，溢出元素顶部的 offSet 为 0，因为它已经滚动，所以这是它现在滚动到的值。

但是，我想不出一个优雅的方法来实现我正在寻找的功能，即无论溢出在哪里，只要调用滚动函数，溢出就会滚动到锚点。

我在下面创建了一个简化示例。在最后一个例子中，滚动之前的动画会移动锚点的相对位置，这就是为什么我在调用函数时设置距离变量的原因：

var body = $(document.body);
var e = window.event || e;

function scroll(e) {

  var distance =  $("#test").offset().top - $(".wrap").offset().top

  TweenMax.to($(".wrap"), 1, {
   scrollTo: {y:distance, autoKill: true},
   force3D: true
  })

};


$(body).on('click', '.click', function (e) {

 scroll();

});

我还创建了一个快速 CodePen，以便人们可以看到实际问题：

http://codepen.io/OneManLaptop/pen/YNbXBX

（点击底部滚动，它应该滚动到 H2 标签）

（演示行为是您单击滚动按钮并且溢出滚动到锚点，但是当您第二次单击它时它会滚动回页面顶部。所需的行为是，无论您单击按钮多少次或锚点相对于溢出 window 的位置，溢出将不会移动 - 因为它已经在锚点 - 或者将滚动以查找锚点的新位置。

感谢您提供的帮助。 :)

Answer 1

Pete 的示例很容易修改为 GSAP 友好：

http://codepen.io/OneManLaptop/pen/NdVRGJ

function scroll(e) {

  var test =  $("#test"),
  wrap = $(".wrap"),
  distance = test.offset().top - parseInt(test.css('margin-top'))  + wrap.scrollTop();

  TweenMax.to($(".wrap"), 1, {
    scrollTo: {y:distance, autoKill: true},
    force3D: true
  })

};

干杯皮特。 :)

多次滚动到一个锚点

Scrolling To An Anchor Point Multiple Times

anchor

jquery

scroll

gsap