多次滾動到錨點

我想寫一個小函數，它使用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

多次滾動到錨點

回答

相關問題