Wie erstelle ich eine browserübergreifende „Scroll to Top“-Animation mit reinem JavaScript?

Browserübergreifende „Scroll-to-Top“-Animation in einfachem JavaScript

Einführung:

Die Verbesserung der Benutzerzugänglichkeit durch die Bereitstellung einer nahtlosen „Scroll-to-Top“-Animation ist für die moderne Webentwicklung von entscheidender Bedeutung. Während JavaScript-Bibliotheken wie jQuery praktische Lösungen bieten, kann die Implementierung dieser Funktionalität rein in JavaScript für eine schlanke und browserübergreifende Kompatibilität von Vorteil sein.

Lösung:

Die bereitgestellte JavaScript-Funktion , scrollTo, ermöglicht Ihnen die Implementierung einer reibungslosen Scroll-to-Top-Animation für jedes Seitenelement. Es benötigt drei Parameter:

• element: Das HTML-Element, durch das Sie scrollen möchten (normalerweise document.body für die gesamte Seite).
• zu : Die gewünschte Scrollposition (in Pixel).
• Dauer: Die Animationsdauer in Millisekunden (für eine flüssige Animation auf 600 ms eingestellt).

Funktionsaufschlüsselung:

• if (duration <= 0) return : Beenden Sie die Funktion, wenn die Animationsdauer kleiner oder gleich ist Null.
• var differenz = to - element.scrollTop: Berechnet die Differenz zwischen der Ziel-Scrollposition und der aktuellen Position.
• var perTick = differenz / Dauer * 10: Bestimmen Sie, wie lange jeweils gescrollt werden soll Intervall.
• setTimeout(...): Legen Sie ein Timeout fest, um die Animationsschleife in regelmäßigen Abständen (10 ms) auszuführen.
• element.scrollTop = element .scrollTop perTick: Aktualisieren Sie die Scroll-Position um den berechneten PerTick-Wert.
• Wenn die Scroll-Position noch nicht gleich ist Um zum Ziel zu gelangen, ruft sich die Funktion rekursiv mit einer verkürzten Dauer auf, bis das Ziel erreicht ist.

Verwendung:

Einbinden des scrollTo-Funktion in Ihren HTML-Code:

<code class="html"><button id="scrollme" type="button">Go to Top</button><p>Hängen Sie den Click-Event-Handler an die an Schaltfläche:</p>
<pre class="brush:php;toolbar:false"><code class="javascript">var scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false);

function runScroll() {
  scrollTo(document.body, 0, 600);
}</code>

Fazit:

Dieses Snippet bietet ein vielseitiges Tool zum Erstellen einer browserübergreifenden Scroll-to-Top-Animation mit nativem JavaScript. Aufgrund seiner Einfachheit und Flexibilität eignet es sich für eine Vielzahl von Webanwendungen.

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