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!
