Wie kann ich eine browserübergreifende Scroll-to-Top-Animation mit reinem JavaScript implementieren?

Cross-Browser JavaScript Scroll to Top Animation (Ohne jQuery)

Viele Webentwickler verlassen sich auf jQuery für nahtlose Seiten-Scroll-Funktionalität. Für diejenigen, die externe Bibliotheken jedoch lieber meiden möchten, gibt es eine einfache Lösung, indem Sie mit reinem JavaScript zum Seitenanfang scrollen.

Um eine browserübergreifende Scroll-Animation zum Seitenanfang zu erzielen, befolgen Sie diese Schritte:

1. Definieren Sie die scrollTo-Funktion: Erstellen Sie eine Funktion, die drei Parameter akzeptiert: Element, bis und Dauer. Diese Funktion verwaltet die Animation.

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

2. Berechnen Sie die Differenz und das Inkrement pro Tick: Berechnen Sie innerhalb der Funktion die Differenz zwischen der aktuellen Bildlaufposition und die gewünschte Position (bis) und dividieren Sie sie durch die Dauer, um das Inkrement pro Tick zu bestimmen.

   <code class="javascript">  if (duration <= 0) return;
     var difference = to - element.scrollTop;
     var perTick = difference / duration * 10;

3. Animationsschleife festlegen: Verwenden Sie setTimeout zum Festlegen eine Animationsschleife, die mit einer Frequenz von 10 Millisekunden läuft. Erhöhen Sie innerhalb der Schleife die Bildlaufposition um das Inkrement pro Tick und prüfen Sie, ob die gewünschte Position erreicht wurde.

   <code class="javascript">  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

4. Verwendung: Für einen reibungslosen Bildlauf Rufen Sie oben auf einer Seite die scrollTo-Funktion wie folgt auf:

   <code class="javascript">scrollTo(document.body, 0, 600);

5. Klick-Ereignis-Listener hinzufügen: Wenn Sie einen Link oder eine Schaltfläche haben, sollte dies der Fall sein Lösen Sie die Scroll-Animation aus und fügen Sie einen Klickereignis-Listener hinzu, um die Funktion aufzurufen, wenn darauf geklickt wird.

   <code class="html"><button id="scrollme" type="button">To the top</button></code>

   <code class="javascript">var scrollme = document.querySelector("#scrollme");
   scrollme.addEventListener("click", runScroll, false);</code>

Dieser reine JavaScript-Code bietet eine einfache, aber effektive Möglichkeit, eine browserübergreifende Umsetzung zu erreichen Scrollen Sie zu den oberen Animationen, sodass Sie die Benutzernavigation verbessern können, ohne dass externe Bibliotheken wie jQuery erforderlich sind.

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