Warum springt.

Question

Ich spiele mit Parallaxe Scrollen wie auf Diese Nike -Seite. Also habe ich benutzt Scrolltop Um die vertikale Position des Benutzers auf der Seite zu bestimmen, und dann habe ich die Positionen des Elements basierend auf den Änderungen an diesem Wert angepasst.

Hier runde ich den Scrolltop -Wert und logge ihn ab. Ich werde das Protokoll später zeigen.

var distance = 60*(Math.round($(window).scrollTop()/60));
console.log(distance);

Auf Klick nenne ich diese Funktion, die zum Scrolltop -Wert scrollt, den ich übergeben habe.

function goTo(n){
    console.log('begin animating');
    $('html,body').animate({scrollTop: n},2000);
}

Hier ist das Problem, der Scroll -Top -Wert springt auf 0, bevor sie animieren.

Also werde ich auf halber Strecke auf der Seite sein und es loget sich ab:

begin animating
0
6240
6180
6120
// etc...

Die Art und Weise, wie ich Sachen positioniere, hängt von der Genauigkeit des Scrolltop -Werts ab. Meine Frage ist also:

Wie kann ich verhindern, dass der Scrolltop -Wert auf 0 springt, bevor ich die Animation durchmache?

Lassen Sie mich wissen, ob weitere Informationen erforderlich sind.
Hier ist die Live -Version der Website: http://theblueyeguy.com/moon/illumination/

(Klicken Sie auf "Weiter", dann "Prev", um es zu brechen)

Answer 1

Wahrscheinlich, weil Sie einen Link mit verwenden href="#".

Hinzufügen return false; zu deinem onclick Attribut.

<a href="#" onClick="goTo(2160);return false;">< Prev | </a>