Mehrere Male zu einem Ankerpunkt scrollen

Question

Ich versuche, eine kleine Funktion zu schreiben, die GSAP verwendet, um zu einem Ankerpunkt zu scrollen, nachdem eine andere Animation abgeschlossen ist.

Das Problem, das ich habe, ist, dass das Skript das erste Mal perfekt funktioniert, Scrollen an die richtige Stelle, aber wenn die Funktion ein zweites Mal aufgerufen wird, wird der Überlauf zurück an den Anfang der Seite gescrollt.

Wie ich es verstehe, ist dies, weil beim zweiten Aufruf der Funktion der offSet von der Spitze des übergelaufenen Elements 0 ist, wie es bereits gescrollt wurde, und so ist dies der Wert, den es jetzt scrollt.

Allerdings kann ich mir keine elegante Methode vorstellen, um die von mir gesuchte Funktionalität zu erreichen, nämlich, egal wo der Überlauf ist, wann immer die Bildlauffunktion aufgerufen wird, blättert der Überlauf zum Ankerpunkt.

Ich habe unten ein reduziertes Beispiel erstellt. Im letzten Beispiel, die Animation, die die Scroll vorangeht, wird die relative Position des Ankerpunktes verschieben, weshalb ich den Abstand Variable gesetzt, wenn die Funktion aufgerufen wird:

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(); 

}); 

die ich angelegt habe auch eine schnelle CodePen, so dass die Menschen das Problem in Aktion sehen können:

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

(klicken scroll am Boden und es sollte auf die H2-Tag blättern)

(die Demo-Verhalten ist, dass Sie die Scroll klicken Knopf und Der Überlauf scrollt zum Anker, aber wenn Sie ihn ein zweites Mal anklicken, scrollt er zurück zum Anfang der Seite. Das gewünschte Verhalten ist, dass egal wie oft Sie auf die Schaltfläche klicken oder wo sich der Anker relativ zum Überlauffenster befindet, der Überlauf sich entweder nicht bewegt - wie bereits am Ankerpunkt - oder er scrollt, um die neue Position zu finden vom Anker.

Vielen Dank für jede Hilfe. :)

Answer 1

Petes Beispiel war leicht zu modifizieren GSAP freundlich zu sein:

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

}; 

Prost Pete. :)