Wie erstelle ich mit reinem JavaScript eine browserunabhängige Scroll-to-Top-Animation?

Browserunabhängige Scroll-to-Top-Animation

Wenn Sie vor der Aufgabe stehen, eine einfache „Scroll-to-Top“-Animation für einen Link zu erstellen, Es ist verlockend, nach einer JavaScript-Bibliothek wie jQuery oder MooTools zu greifen. Es ist jedoch möglich, diesen Effekt mit reinem JavaScript zu erzielen und so eine browserübergreifende Kompatibilität zu gewährleisten.

Der bereitgestellte Code implementiert eine Scroll-Animation, die das Dokument über eine bestimmte Dauer elegant zurück nach oben schiebt. Es handelt sich um eine eigenständige Funktion, die auf jedes Element mit einer Bildlaufleiste angewendet werden kann und eine bessere Benutzererfahrung bietet, indem sie ihnen ermöglicht, schnell zum Seitenanfang zurückzukehren.

1. Funktionssignatur:

<code class="javascript">function scrollTo(element, to, duration) {</code>

• Element: Das zu scrollende Element, normalerweise das HTML- oder Body-Element.
• to: Die Ziel-Scrollposition in Pixel.
• Dauer: Die Animationsdauer in Millisekunden.

2. Animationslogik:

• Wenn die Dauer nicht positiv ist , die Funktion kehrt sofort zurück.
• Die Differenz zwischen der Ziel- und der aktuellen Bildlaufposition wird berechnet.
• Ein PerTick-Wert wird berechnet, um den inkrementellen Bildlaufbetrag pro Animationsbild zu bestimmen.
• Mit setTimeout wird die Bildlaufposition schrittweise in 10-Millisekunden-Intervallen angepasst, bis das Ziel erreicht ist.

3. Beispielverwendung:

Im bereitgestellten HTML-Snippet wird eine Schaltfläche mit der ID „scrollme“ als Auslöser für die Animation verwendet:

<code class="javascript">function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)</code>

• Beim Klicken ruft die runScroll-Funktion die scrollTo-Animation auf und scrollt die Seite nach die Spitze über 600 Millisekunden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit reinem JavaScript eine browserunabhängige Scroll-to-Top-Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!