Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-02 08:14:02
Original
863 Leute haben es durchsucht

How to Create a Cross-Browser

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!