多次滚动到锚点

我想写一个小函数，它使用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标签）

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

感谢您提供任何帮助。 :)

来源

2017-02-17 Dave

也许我还不够清楚呢？当您第一次单击滚动链接时，它会滚动到h2锚点，但当您再次单击它时，它会滚动到页面的顶部。期望的行为是它停留在锚点处，并且不在其他地方滚动。 – Dave

从来没有使用tween max，但你这是怎么回事：http://codepen.io/anon/pen/ygWJLq（使用jquery动画替代） – Pete

这是一个解决方案，所以非常感谢您花时间。 :) – Dave

皮特的例子是易于修改是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 
    }) 

};

干杯皮特。 :)

来源

2017-02-17 16:12:52 Dave

多次滚动到锚点

回答

相关问题