js-Anker-Scrolling-Beispiel zum Teilen

Geschrieben mit Bootstrap. Das Folgende sind die trockenen Informationen: Das href in jedem a jedes li von ul zeigt auf das Ankerziel, zum Beispiel <li class="active"><a href="#index">Home</a></li>。 Hier ist der Quellcode, den ich gefunden habe:

$('#navbar-menu ul li a[href^="#"]').click(function(e){
                    e.preventDefault();
                    $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
                });

Übersetzung: Verhindern Sie beim Klicken zunächst das Standardverhalten und lassen Sie dann den HTML- und Body-Scroll-Animationstext zum Abstand von oben scrollen, der als Ziel-Offset().top-Abstand dient. in Innerhalb von 4 Millisekunden abgeschlossen. Das Hash-Attribut ist eine lesbare und beschreibbare Zeichenfolge, die den Ankerteil der URL darstellt (der Teil, der mit dem #-Zeichen beginnt), sodass sich this.hash auf den #-Teil der aktuellen Adresse bezieht. Was das hierdurch dargestellte Objekt betrifft, werden wir es später zusammenfassen.
ps:$('body').scrollspy({ target: '#menu-nav' })Dieses Bootstrap-Scrollspy-Plugin überwacht automatisch das Scrollen des Ziels und ändert das entsprechende Aktiv, was sehr gut ist.

Verwandte Empfehlungen:

Javascript-Implementierung des Navigationsanker-Scrolleffekts

Das obige ist der detaillierte Inhalt vonjs-Anker-Scrolling-Beispiel zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!