Maison > interface Web > js tutoriel > JQuery implémente un défilement fluide entre les liens d'ancrage sur la même page_jquery

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

WBOY
Libérer: 2016-05-16 16:32:46
original
1295 Les gens l'ont consulté

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; 
} 
} 
}); 
});
Copier après la connexion

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é.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal