Maison > interface Web > js tutoriel > JQUERY Auto fait défiler en haut de la page

JQUERY Auto fait défiler en haut de la page

Christopher Nolan
Libérer: 2025-03-11 00:06:11
original
954 Les gens l'ont consulté

Utilisez jQuery pour un défilement automatique et automatisé vers le haut

Ce simple extrait de code jQuery fournit un parchemin automatique et automatisé vers le haut de votre page Web. Pourquoi l'utiliser? Il fait gagner du temps aux utilisateurs sur les pages longues et ajoute une touche visuellement attrayante.

[Demo en direct: jQuery Scroll vers le haut] (lien vers la démo - Remplacez par un lien de démonstration réel si disponible)

voici le code:

 jQuery (document) .Ready (function ($) {$ ('a [href = # topbar]'). $ ('html, corps'). Animate ({scrolltop: 0}, 'lent'); Cdn).  
Copier après la connexion
  • Ajoutez l'extrait de code ci-dessus dans les balises <cript> </cript>, idéalement juste avant la balise body> . Assurez-vous que le sélecteur #topbar correspond à un lien d'ancrage sur votre page.
  • Que fait scrolltop () ?

    La méthode scrolltop () obtient ou définit la position verticale de Scrollbar. Utilisé sans arguments, il renvoie la position actuelle; Avec un argument (comme 0 ), il définit la barre de défilement à cette position.

    pendant une demi-seconde).

    Puis-je faire défiler vers un élément spécifique au lieu de la méthode en haut?

    , utilisez la méthode offset () pour obtenir la position de l'élément, puis utilisez animate () <p> </p> <p> Bouton? </p> <p> Utilisez la méthode de jQuery's <code> cliquez sur () pour attacher une fonction à l'événement de clic d'un bouton, en déclenchant le parchemin.

    Assurez-vous que jQUERY est inclus correctement. Sur la page.

    Compatibilité mobile?

    Cela fonctionne sur les appareils mobiles, bien que la douceur puisse varier en raison des différences de gestion des événements.

    alternative sans jQuery?

    pur javascrip scrolltop () .

    jQuery Auto Scroll en haut de la page

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    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
    Derniers articles par auteur
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal