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标签）

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

感谢您提供任何帮助。：）

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
  })

};

干杯皮特。：）

多次滚动到锚点

1 个答案: