Wie erstelle ich ohne jQuery ein reibungsloses animiertes Scrollen nach oben?

Animiertes Scrollen nach oben in vielen Browsern (außer jQuery)

Implementierung eines reibungslosen animierten „Scroll-to-Top“-Effekts auf einem Die Angabe einer Webseite ist eine häufige Anforderung. Es kann jedoch unerwünscht sein, sich auf externe JavaScript-Bibliotheken wie jQuery zu verlassen. Dieser Artikel stellt eine browserübergreifende Lösung zum Erstellen einer solchen Animation vor, ohne dass zusätzliche Frameworks erforderlich sind.

Das Skript verstehen

Der bereitgestellte Code beinhaltet eine rekursive Funktion namens scrollTo, das drei Parameter annimmt:

1. element: Das Zielelement zum Scrollen (z. B. document.body)
2. to: Die gewünschte Scroll-Position (z. B. 0 für das Scrollen nach oben)
3. Dauer:Die Dauer der Animation in Millisekunden

Die Funktion berechnet die Differenz zwischen den Die aktuelle Bildlaufposition des Elements wird mit der gewünschten verglichen und alle 10 Millisekunden ein kleines Inkrement angewendet, um die Lücke zu schließen. Dadurch entsteht ein allmählicher und sanfter Scrolleffekt.

Verwendungsbeispiel

Um diese Lösung zu verwenden, fügen Sie einfach das in der Antwort bereitgestellte JavaScript-Snippet ein und erstellen Sie einen Listener dafür das Click-Ereignis für das Element, das Sie zum Starten des Scrollens verwenden möchten. Hier ist ein Beispiel:

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

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

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich ohne jQuery ein reibungsloses animiertes Scrollen nach oben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!