JQuery implementiert ein reibungsloses Scrollen zwischen Ankerlinks auf derselben page_jquery

Ich habe JQuery immer als Frontend für die Webentwicklung verwendet. Erst nachdem ich damit in Kontakt gekommen war, wurde mir klar, dass JQuery viel leistungsfähiger ist, als ich dachte, und es könnte viel leistungsfähiger sein, als ich dachte, insbesondere das eine Mit besserer Kompatibilität habe ich mich für die Verwendung von JQuery entschieden, die alle JS ersetzen können.

Wir stellen das heutige Thema von JQuery vor und verwenden JQuery, um einen reibungslosen Bildlauf zwischen Ankerlinks zu erreichen. Ich habe zuvor einen mit JS implementierten Seitenanker-Sprungpuffereffekt eingeführt, der ein reibungsloses Scrollen zwischen Ankerlinks auf derselben Seite ermöglicht Wurde JQuery geladen, können wir den gleichen Effekt mit kürzerem Code erzielen.

So verwenden Sie es:

1. Laden Sie die JQuery-Bibliothek

2. Schlüsselcode:

$(document).ready(function() { 
$('a[href*=#]').click(function() { 
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
var $target = $(this.hash); 
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); 
if ($target.length) { 
var targetOffset = $target.offset().top; 
$('html,body').animate({ 
scrollTop: targetOffset 
}, 
1000); 
return false; 
} 
} 
}); 
});

Ich möchte immer noch die Ladereihenfolge hervorheben. Beziehen Sie sich zunächst auf die JQuery-Klassenbibliothek. Nach dem Testen ist der Scroll-Effekt übrigens in allen Browsern kompatibel und anwendbar, allerdings verhält er sich unter Opera etwas seltsam und muss verbessert werden.