JQuery implémente un défilement fluide entre les liens d'ancrage sur la même page_jquery

J'ai toujours utilisé JQuery pour le développement Web front-end. Ce n'est qu'après l'avoir contacté que j'ai réalisé que JQuery est beaucoup plus puissant que je ne le pensais, et il est peut-être beaucoup plus puissant que je ne le pensais, en particulier celui-là. avec une meilleure compatibilité, j'ai donc décidé d'utiliser JQuery. Certaines choses amusantes et sympas, qui peuvent remplacer JS, sont toutes utilisées.

Présentation du sujet d'aujourd'hui de JQuery, utilisation de JQuery pour obtenir un défilement fluide entre les liens d'ancrage. J'ai déjà introduit un effet de tampon de saut d'ancre de page implémenté à l'aide de JS. L'effet est assez bon et permet d'obtenir un défilement fluide entre les liens d'ancrage sur la même page. Cependant, le code JS est maintenant meilleur. Avec JQuery chargé, nous pouvons obtenir le même effet avec un code plus court.

Comment l'utiliser :

1. Chargez la bibliothèque JQuery;

2. Code clé :

$(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; 
} 
} 
}); 
});

Je tiens toujours à souligner l'ordre de chargement, référez-vous d'abord à la bibliothèque de classes JQuery. D'ailleurs, après tests, l'effet de défilement est compatible et applicable dans tous les navigateurs, mais il se comporte un peu bizarrement sous Opera et doit être amélioré.