JavaScript zum Erzielen eines Bodeneffekts

* {
            Rand: 0;
            Polsterung: 0;
        }
        
        html,
        Körper {
            Breite: 100 %;
            Höhe: 100%;
        }
        
        ul {
            Breite: 100 %;
            Höhe: 100%;
        }
        
        ul>li {
            Listenstil: keiner;
            Breite: 100 %;
            Höhe: 100%;
            Schriftgröße: 100px;
            Textausrichtung: zentriert;
        }
        
        ol {
            Position: fest;
            links: 10px;
            oben: 50 %;
            transformieren: verschiebeY(-50%);
        }
        
        ol>li {
            Listenstil: keiner;
            Breite: 100px;
            Zeilenhöhe: 40px;
            Textausrichtung: zentriert;
            Rand: 1px durchgezogen #000;
        }
        
        .ausgewählt {
            Hintergrund: himmelblau;
        }

 <ul>
        <li>Ich bin Stufe 1</li>
        <li>Ich bin Stufe 2</li>
        <li>Ich bin Stufe 3</li>
        <li>Ich bin Stufe 4</li>
        <li>Ich bin Stufe 5</li>
    </ul>
 
    <ol>
        <li class="selected">Ebene 1</li>
        <li>Ebene 2</li>
        <li>Ebene 3</li>
        <li>Schicht 4</li>
        <li>Schicht 5</li>
</ol>

// 1. Initialisieren Sie die Farbe des Bodens let oPages = document.querySelectorAll("ul>li");
let colorArr = ['grün', 'blau', 'lila', 'rot', 'gelb'];
        für (lass i = 0; i < oPages.length; i++) {
            let Seite = oSeiten[i];
            Seite.Stil.Hintergrund = colorArr[i];
        }
 
        // 2. Wählen Sie aus, wer angeklickt wurde. let oItems = document.querySelectorAll("ol>li");
        Lassen Sie currentItem = oItems[0];
 
        // Höhe des sichtbaren Bereichs abrufen let screenHeight = getScreen().height;
 
        lass timerId = null;
        für (lass i = 0; i < oItems.length; i++) {
            Füge die folgenden Elemente hinzu:
            item.onclick = Funktion() {
                currentItem.className = "";
                this.className = "ausgewählt";
                aktuellesElement = dies;
                // Scrollen implementieren // window.scrollTo(0, i * screenHeight);
                // Hinweis: Verwenden Sie documentElement.scrollTop, um durch die Webseite zu scrollen. Fügen Sie beim Festlegen des Werts keine Einheiten hinzu. // document.documentElement.scrollTop = i * screenHeight + "px";
                // Dokument.documentElement.scrollTop = i * Bildschirmhöhe;
                Intervall löschen(Timer-ID);
                TimerId = Intervall setzen(Funktion() {
                    lass begin = Dokument.documentElement.scrollTop;
                    let target = i * Bildschirmhöhe;
                    sei Schritt = (Ziel – Beginn) * 0,2;
                    Beginn += Schritt;
                    wenn (Math.abs(Math.floor(Schritt)) <= 1) {
                        Intervall löschen(Timer-ID);
                        document.documentElement.scrollTop = i * Bildschirmhöhe;
                        zurückkehren;
                    }
                    document.documentElement.scrollTop = beginnen;
                }, 50);
            }
        }
 
        //Breite und Höhe des Browser-Ansichtsfensters abrufen function getScreen() {
            lass Breite, Höhe;
            if (Fenster.innereBreite) {
                Breite = Fenster.Innenbreite;
                Höhe = Fenster.Innenhöhe;
            } sonst wenn (document.compatMode === "BackCompat") {
                Breite = Dokument.Body.Clientbreite;
                Höhe = Dokument.Body.ClientHöhe;
            } anders {
                Breite = Dokument.Dokumentelement.Clientbreite;
                Höhe = Dokument.Dokumentelement.Clienthöhe;
            }
            zurückkehren {
                Breite: Breite,
                Höhe: Höhe
            }
        }