Maison  >  Article  >  interface Web  >  Utilisez jquery animate pour créer un effet de défilement fluide (peut être vers le haut, vers le bas ou à un endroit spécifié)_jquery

Utilisez jquery animate pour créer un effet de défilement fluide (peut être vers le haut, vers le bas ou à un endroit spécifié)_jquery

WBOY
WBOYoriginal
2016-05-16 16:46:541301parcourir

Il est en effet pratique d'utiliser des points d'ancrage pour sauter sur la page, mais si vous souhaitez augmenter l'effet de la page Web, vous pouvez utiliser animer dans jquery pour réaliser une action de défilement, et faire défiler lentement jusqu'à la position souhaitée pour y sauter. Cela aura l'air très chic.

Faites défiler vers le haut :

Copier le code Le code est le suivant :
$('.scroll_top').click(function( ){$ ('html,body').animate({scrollTop: '0px'}, 800);});

Faites défiler jusqu'à la position spécifiée :

Copier le code Le code est le suivant :
$('.scroll_a').click(function( ){$ ('html,body').animate({scrollTop:$('.a').offset().top}, 800);});


Exemple complet de référence de code source :

Copier le code Le code est le suivant :

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



js défile en douceur vers le haut, le bas et l'endroit spécifié







introduction du produitintroduction du produitintroduction du produitintroduction du produitintroduction du produit introduction du produit Présentation du produit Présentation du produit Présentation du produit Présentation du produit Présentation du produit Présentation du produit Présentation du produit Présentation du produit Présentation du produit Présentation du produit





< ;div class="box bottom">


Retour en haut


Présentation du produit< p>

Faites défiler vers le bas





Déclaration:
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
Article précédent:Utilisez jQuery pour implémenter des tables_jquery modifiablesArticle suivant:Utilisez jQuery pour implémenter des tables_jquery modifiables

Articles Liés

Voir plus