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>

   Nach dem Login kopieren

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;

   Nach dem Login kopieren

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);

   Nach dem Login kopieren

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);

   Nach dem Login kopieren

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>

   Nach dem Login kopieren

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

   Nach dem Login kopieren

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!