Jquery fait défiler la page jusqu'à l'élément. Faire défiler jusqu'à un élément à l'aide de jQuery. Transition en douceur lorsque vous appuyez sur un bouton. Plus de détails sur l'appel scrollTo()

Vous avez bien sûr vu un lien « vers le haut » sur des pages avec beaucoup de texte tout en bas. Ou prenez, par exemple, le contenu (à condition que l'intégralité du document soit sur une seule longue page). La signification est à peu près la même. Cliquez sur le lien et vous serez redirigé vers un endroit précis du document. En fait, nous rembobinons le défilement par programme.

La mise en œuvre de cela à l’aide d’une ancre est un jeu d’enfant. Mais que se passe-t-il si je ne veux pas arriver instantanément au point souhaité, mais plutôt « rembobiner » le parchemin ?

Testé dans :

IE 6-8
Firefox4
Opéra 10
Safari4
Chrome

Tâche

Implémentez le rembobinage du défilement logiciel.

Solution

Nous utiliserons le plugin jQuery.ScrollTo spécialement développé pour cela. Il peut faire beaucoup de choses. Par exemple, il peut rembobiner à la fois le défilement principal d'une fenêtre et le défilement de certains fichiers . Peut revenir en arrière jusqu'à une position spécifique (en pixels ou en pourcentages) ou jusqu'à un élément spécifique (spécifié, par exemple, par ). Tout cela a déjà été créé, notre tâche est d'apprendre à l'utiliser.

Que télécharger ?

téléchargez la bibliothèque jquery ou .
(2,26 Ko) le plugin lui-même.

Départ rapide

Connexion des bibliothèques :

Nous écrivons l'identifiant de quelqu'un en HTML - nous rembobinons la fenêtre jusqu'à cet élément :

Rubrique importante

Réglez le bouton de commande :

Revenir au titre important

Lorsque vous cliquez sur le bouton, nous activons le rembobinage :

jQuery(document).ready(function())( jQuery("button").click(function() ( jQuery.scrollTo("#target-el"); )); ));

Et maintenant plus en détail

La commande jQuery.scrollTo() rembobinera le défilement principal. Si vous devez rembobiner le défilement d'un élément, utilisez une notation comme jQuery("selector").scrollTo(), par exemple :

JQuery("div.pane").scrollTo("#target-el");

Paramètres de scrollTo()

Eh bien, comme d'habitude, toute la magie est dans les paramètres :

Nom du paramètre Descriptionaxe durée assouplissement marge compenser sur file d'attente surAprèsPremier surAprès

L'axe qui défilera est "x", "y", "xy" ou "yx". "xy" est la valeur par défaut

Durée de l'animation.

Le nom de l’équation est assouplissement.

Si c'est vrai, les limites cibles et la marge sont soustraites.

Chilso ou hachage (gauche : x, haut : y ). Cette valeur sera ajoutée à la position finale (peut être négative)

Ajoutez une partie de la hauteur/largeur de l'élément (peut également être négative).

Si c'est vrai et que les deux axes peuvent défiler, alors le défilement sur un axe est animé d'abord, puis sur l'autre. L'ordre est déterminé par l'axe paravitr ("xy" ou "yx")

Si queue=true, la fonction sera exécutée après avoir fait défiler le premier axe.

Une fonction appelée une fois l'animation entière terminée.

Plus de détails sur l'appel scrollTo()

Lors de l'appel de scrollTo(), trois types de paramètres sont transmis : cible, durée, paramètres (l'ordre compte).

le but est de savoir où exactement rembobiner (voir ci-dessous pour plus de détails) ;
durée — le paramètre de durée du tableau ci-dessus ;
paramètres - les paramètres restants du tableau ci-dessus.

Comme objectif, vous pouvez utiliser :

Juste un numéro
Chaîne ("44", "100px", "+=30px", etc.)
Élément DOM (enfant de l'élément déroulant)
Sélecteur
Ligne "max" pour faire défiler jusqu'à la fin
Une chaîne spécifiant le pourcentage pour aller à une partie du conteneur (ex : 50% va au milieu)
Le hachage ( top:x, left:y ), x et y peuvent être n'importe quel nombre/chaîne décrit ci-dessus.

Exemples d'appels avec paramètres.

Comment tout a commencé

Code HTML des boutons :

En haut

Vers le bas

Styles CSS :

#en haut
{
largeur : 60 px ;
hauteur : 60 px ;
position : fixe ;
bas : 50 px ;
gauche : 20 px ;
couleur d'arrière-plan : #000000 ;
rayon de bordure : 30 px ;
}
#vers le bas
{
largeur : 60 px ;
hauteur : 60 px ;
position : fixe ;
bas : 50 px ;
gauche : 90 px ;
couleur d'arrière-plan : #000000 ;
rayon de bordure : 30 px ;
}
.pPageScroll
{
couleur :#FFFFFF ;
police : gras 12 pt « Comic Sans MS » ;
texte-align:centre;
}

En conséquence, nous avons deux cercles avec les inscriptions « Up » et « Down » dans le coin inférieur gauche du navigateur.

Les problèmes commencent Maintenant, le plaisir commence - JavaScript, ou plutôt jQuery. Comme vous le savez, pour organiser le défilement, des manipulations sont effectuées sur les propriétés scrollTop et scrollLeft. Dans jQuery, ces manipulations sont effectuées respectivement à l'aide des méthodes .scrollTop() et .scrollLeft(). Nous ne nous intéressons qu’au .scrollTop.
La première option de défilement, la plus simple, ressemblait à ceci :

//Gestion du clic sur le bouton "Up"
$("#up").click(function())(
//Vous devez faire défiler vers le haut de la page
$("body").animate(("scrollTop":0),"lent");
});

//Gestion d'un clic sur le bouton "Down"
$("#down").click(function())(
//Vous devez faire défiler vers le bas de la page
var hauteur=$("corps").hauteur();
$("body").animate(("scrollTop":height),"slow");
});

Tout est très simple et sans prétention. Mais, pas de chance, si dans Chrom tout était assez clair et agréable, dans Opera c'était aussi tout à fait tolérable (le défilement vers le haut s'effectuait instantanément), alors le « Harmful Fox » a complètement refusé de faire défiler. Sans hésiter, en remplaçant la ligne : $("body").animate "body" par "html", j'ai radicalement changé la situation : FireFox a commencé à fonctionner, Opera a arrêté de défiler vers le haut par saccades et a commencé à le faire en douceur, mais maintenant Chrome a cessé de répondre à la manipulation des boutons. Des épreuves ci-dessus, l'option suivante a suivi, digestible par tous les navigateurs : $("html,body").animate... Aucune autre méthode de défilement acceptable qui fonctionne dans tous les navigateurs n'a été trouvée.

Ajoutons quelques volants et nœuds. Nous avons réglé la partie la plus simple. La fonctionnalité de base a été atteinte, vous pouvez maintenant proposer quelque chose de plus intéressant. La première chose qui attire l’attention est la vitesse de défilement. En présence de tout type de contenu riche, l'utilisation du défilement devient un véritable test de tendance à l'épilepsie. Par conséquent, j'aimerais que le défilement soit plus fluide. La solution est simple, définissez une certaine constante de temps pendant laquelle le défilement doit avoir lieu. Un avantage évident : la simplicité de la solution. Un inconvénient tout aussi évident : le volume du contenu n’est pas pris en compte. Une solution intelligente : calculer le temps d'exécution du défilement en fonction de la taille du contenu. Commençons.
Dans le code des deux boutons, vous devez ajouter le calcul de la position actuelle. C’est exactement à cela que sert la méthode jQuery().scrollTop().
Ici, des problèmes déjà connus apparaissent : $("body").scrollTop() ne fonctionne que dans Chrome, $("html").scrollTop() ne fonctionne pas dans Chrome. Ce qui, d'une manière générale, est surprenant, puisqu'il s'avère qu'avec la construction $("body").animate(("scrollTop":height),"slow") dans Opera on peut faire défiler le corps, et une fois reçu, le La propriété scrollTop de la balise body est égale à zéro, ce qui, à en juger par la description de l'élément. scrollTop est valide pour les éléments qui ne peuvent pas défiler.
L'option $("body,html") ne nous convient pas pour des raisons évidentes. Nous recherchons des alternatives. Il s'avère que la position actuelle peut être obtenue à partir des objets fenêtre et document d'une manière qui convient à tous les navigateurs. Je pense qu'il vaut la peine de mentionner que les utiliser pour l'animation (par exemple comme ceci : $(document).animate.) ne mène à rien de bon.
Ainsi, comme option de travail pour connaître la position actuelle, prenons : $(document).scrollTop();
Pensons maintenant à la façon dont nous calculons le temps. De manière générale, la solution est triviale et connue de tous : temps = chemin/vitesse. Pour déterminer le chemin, nous avons juste besoin de la position actuelle. De plus, vous avez besoin des coordonnées du point de destination. Avec le bouton « Haut » tout est simple, la coordonnée du point de destination le long de l'axe vertical est nulle, ce qui signifie que le chemin est égal à la position actuelle. Pour le bouton « Bas », tout est un peu plus compliqué : il faut récupérer la « hauteur » du document. Nous anticipons déjà les problèmes, n’est-ce pas ? Mais non, tout s'avère ici très simple. Une hauteur tout à fait adaptée peut être obtenue en utilisant « body », « html » ou document comme sélecteur.
Donc. Nous avons le chemin, maintenant nous avons besoin de vitesse. Ici, tout dépend de vous personnellement. Sur la base de calculs visuels, la vitesse de 1,73 m'a semblé confortable (le chiffre n'a aucune justification sérieuse et n'était qu'une estimation). Version finale Ainsi, le code de travail ressemble à ceci :

$(document).ready(function())(
//Gestion du clic sur le bouton "Up"
$("#up").click(function())(
//Vous devez faire défiler vers le haut de la page

var scrollTime=curPos/1.73;
$("body,html").animate(("scrollTop":0),scrollTime);
});

//Gestion d'un clic sur le bouton "Down"
$("#down").click(function())(
//Vous devez faire défiler vers le bas de la page
var curPos=$(document).scrollTop();
var hauteur=$("corps").hauteur();
var scrollTime=(hauteur-curPos)/1.73;
$("body,html").animate(("scrollTop":height),scrollTime);
});
});

De plus, vous pouvez ajouter des coefficients par lesquels le temps ou la vitesse seraient multipliés en fonction du chemin pour offrir plus de flexibilité, mais je ne m'attarderai pas là-dessus.

Résumé En conséquence, nous avons obtenu une implémentation très simple du défilement des pages qui fonctionne dans n'importe quel navigateur moderne.
Des tests ont été réalisés pour DOCTYPE : XHTML 1.0 Strict dans les navigateurs Chrome 10, Opera 10, Opera 11, Firefox 4, Internet Explorer 8, Internet Explorer 9. Quelques problèmes :

border-radius, comme vous le savez, ne fonctionne pas dans IE8, mais la mise en page entre navigateurs n'est pas le sujet de ce sujet.
Dans Opera 10, l'instruction est : $("body,html").animate(("scrollTop":0),scrollTime); conduit à une transition immédiate vers le haut de la page. Ce problème disparaît avec le passage à Opera 11.

UPD : Le dernier exemple a été corrigé.

Bonjour les amis. Dans cet article, nous examinerons l'événement jQuery lorsque la page défile jusqu'à un élément spécifique. En d'autres termes, alors... Dans cet exemple, nous déclencherons un événement lorsque la page défilera jusqu'au pied de page. Ensuite, nous afficherons une petite fenêtre pop-up avec une apparence fluide. Et nous le fermerons également en cliquant. Décidez vous-même quoi y mettre, il existe de nombreuses options. Voici à quoi cela ressemble :

Commençons par le balisage HTML et il n'y a rien d'inhabituel ici. Tout est assez simple et clair. Un grand canevas de texte, un pied de page en bas et un bloc avec un bouton qui apparaîtra. Voici le code du bloc :

1 2 3 4 5 6 7 8 9 10

Il y a beaucoup de contenu ici... Du texte. Bas de page

Commençons maintenant à concevoir notre bloc caché et son bouton :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

#block ( affichage : aucun ; position : fixe ; haut : 15px ; droite : 15px ; couleur : #fff ; arrière-plan : #4CAF50 ; remplissage : 10px ; border-radius : 5px ; width : 200px ; box-shadow : 0 13px 20px -5px #3a3a3a ; font-family : Arial ; text-align : center ; ) .btn( background : #FF9800 ; border : 2px solid #795548 ; color : #fff ; border-radius : 5px ; curseur : pointeur ; padding : 5px 10px ; margin-top : 10px ; font-weight : gras ; )

#block (affichage : aucun ; position : fixe ; haut : 15 px ; droite : 15 px ; couleur : #fff ; arrière-plan : # 4CAF50 ; remplissage : 10 px ; rayon de bordure : 5 px ; largeur : 200 px ; ombre de la boîte : 0 13 px 20 px -5px #3a3a3a ; famille de polices : Arial ; alignement du texte : centre ; ) .btn( arrière-plan : #FF9800 ; bordure : 2px solide #795548 ; couleur : #fff ; rayon de bordure : 5px ; curseur : pointeur ; remplissage : 5px 10px ; marge supérieure : 10 px ; poids de la police : gras ; )

Parlons maintenant directement de ce qu'on appelle le défilement vers l'élément. Pourtant, l’anglais est nécessaire pour un développeur. Nous connectons jQuery en standard. Je le ferai via CDN car ce sera la version la plus à jour.

Et puis le code du script lui-même, qui va créer de la magie sur la page :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(document).ready (function () ( var $element = $(".footer" ) ; let counter = 0 ; $(window).scroll (function () ( var scroll = $(window).scrollTop () + $(window) .height () ; //Si faites défiler jusqu'à la fin de l'élément //var offset = $element.offset().top + $element.height(); //Si faites défiler jusqu'au début de l'élément element var offset = $element .offset () .top if (scroll > offset && counter == 0 ) ( $("#block" ) .fadeIn (500 ) ; counter = 1 ; ) ) ; $(".btn" ) .click (function () ( $("#block" ) .slideUp () ; ) ) ; ) ) ;

$(document).ready(function())( var $element = $(".footer"); laissez compteur = 0; $(window).scroll(function() ( var scroll = $(window).scrollTop( ) + $(window).height(); //Si faites défiler jusqu'à la fin de l'élément //var offset = $element.offset().top + $element.height(); //Si faites défiler jusqu'au début de l'élément var offset = $element .offset().top if (scroll > offset && counter == 0) ( $("#block").fadeIn(500); counter = 1; ) )); $(". btn").click(function ()( $("#block").slideUp(); )); ));

Par défaut, l'événement est déclenché dès que le début de l'élément, en l'occurrence le pied de page, apparaît dans la zone de visibilité, mais vous pouvez modifier la valeur en décommentant la ligne 7 et ensuite la fonction se déclenchera lorsque le défilement arrivera à la fin. de l'élément.

Il s'agit d'un moyen intelligent de montrer aux visiteurs de votre site votre offre unique et, en ajoutant des objectifs à la métrique, de suivre sa conversion.

Récemment, les types de sites appelés Landing Pages sont devenus très populaires. Ils sont pratiques car l'utilisateur reçoit toutes les informations nécessaires sur une seule page. Le plus souvent, il s'agit d'informations sur le produit, qui le décrivent sous toutes ses coutures, permettent de comprendre ses atouts et ses avantages et, bien sûr, de passer commande.

Ces sites s'avèrent assez longs, donc pour faciliter la navigation, ils créent souvent un menu de navigation avec des liens vers des sections spécifiques. Apprenons comment nous assurer que lorsque vous cliquez sur un lien, le site défile en douceur jusqu'à l'emplacement souhaité.

$("a" ) .click (function () ( var elementClick = $(this) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; $("html, body" ) .animate (( scrollTop: destination ) , 600 ) ; return false ; ) ) ; Vue alternative

Auparavant, nous procédions un peu différemment - nous utilisions la définition du navigateur - $.browser.safari || $.browser.webkit et selon la condition, $("body").animate() ou $("html").animate() . Depuis la version 1.9, jQuery - $.browser a été supprimé et ne fonctionnera donc pas. Mais vous pouvez modifier le code et obtenir le script suivant :

var correspond, navigateur ; jQuery.uaMatch = function ( ua ) ( ua = ua.toLowerCase () ; var match = /(chrome)[ \/]([\w.]+)/ .exec ( ua ) || /(webkit)[ \ /]([\w.]+)/ .exec ( ua ) || /(opera)(?:.*version|)[ \/]([\w.]+)/ .exec ( ua ) || /(msie)[\s?]([\w.]+)/ .exec ( ua ) || /(trident)(?:.*? rv:([\w.]+)|)/ .exec ( ua ) || ua.indexOf ("compatible")< 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/ .exec ( ua ) || ; return { browser: match[ 1 ] || "" , version: match[ 2 ] || "0" } ; } ; matched = jQuery.uaMatch ( navigator.userAgent ) ; //IE 11+ fix (Trident) matched.browser = matched.browser == "trident" ? "msie" : matched.browser ; browser = { } ; if ( matched.browser ) { browser[ matched.browser ] = true ; browser.version = matched.version ; } $("a" ) .click (function () { var elementClick = $(this ) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; if (browser.chrome || browser.webkit ) { $("body" ) .animate ({ scrollTop: destination } , 600 ) ; } else { $("html" ) .animate ({ scrollTop: destination } , 600 ) ; } return false ; } ) ;

C'est tout. Bonne chance à tous!

Il a depuis longtemps pris racine parmi les développeurs.
Donc. A l'aide des plugins présentés dans cette collection, vous pouvez créer un site internet moderne avec une excellente dynamique. Je pense que toute personne intéressée par le développement de sites Web a vu ces plugins en action. Lors du défilement de la page, des blocs, divers éléments ou textes apparaissent, bougent, tournent, etc. Comme le montre la pratique, les clients aiment vraiment ces trucs sophistiqués.
Implémenter des effets de défilement sur une page n'est pas aussi difficile qu'il y paraît à première vue. Tout ce dont vous avez besoin est un plugin de haute qualité et des mains directes. Bien sûr, un maquettiste novice peut rencontrer des difficultés, mais si vous restez assis pendant un moment et comprenez les principes de fonctionnement, la tâche semblera très simple.
Malgré le fait que beaucoup de gens aiment l'animation sur le site, il ne faut pas en faire trop, sinon vous vous retrouverez avec une page surchargée, visuellement mal perçue, dans laquelle toute l'attention sera portée sur tous ces « sifflets », et non sur les informations. qui doit être transmis au visiteur. De plus, plus il y a de scripts connectés, plus la page fonctionne lentement. Dans les navigateurs plus anciens, tout cela peut ne pas fonctionner du tout. Connectez judicieusement les effets. Souvent, une simple apparence lisse et discrète des blocs suffit. Cet effet donne à la page fluidité et dynamique, rendant le site vivant. Dans ma pratique, j'ai vu beaucoup de sites avec des effets sans sens des proportions. Cela me rend malade – le seul sentiment qui surgit. Mais, probablement, les développeurs espéraient un « effet Wow ». Donc. Utilisez tout à bon escient et avec modération !
Tous les plugins sont absolument gratuits, mais je vous recommande de vous familiariser avec les licences, car dans certains cas, vous devez remplir un certain nombre de conditions pour les utiliser à des fins commerciales.

WOW.jsUn bon plugin pour implémenter l'animation des éléments lors du défilement. Il propose de nombreuses options d’apparence de blocs animés et est assez facile à personnaliser. ScrollMagic Un autre plugin populaire avec lequel vous pouvez implémenter des animations complexes qui se déclencheront lorsque le rouleau de la souris défile. Dans ce cas, le plugin vous permet de créer des effets de mouvement vraiment complexes, en modifiant l'arrière-plan de la page et en déformant généralement les formes. ScrollMagic est souvent utilisé sur des sites promotionnels nécessitant beaucoup d’animation.

ScrollmeUn plugin simple et léger avec lequel vous pouvez implémenter une animation spectaculaire lors du défilement. Vous pouvez redimensionner, faire pivoter, déplacer, réduire ou augmenter la transparence de n'importe quel élément.

Superscrollorama Superscrollorama est un plugin puissant mais lourd pour créer des animations de défilement. Son arsenal comprend de nombreux paramètres différents pour l'animation du texte, des éléments DIV individuels, y compris des effets.
Des informations plus détaillées peuvent être trouvées dans la documentation de ce plugin jQuery.

onScreen est un excellent plugin que nous utilisons souvent dans nos projets. Il vous permet de créer facilement et rapidement divers effets pour l'apparence des éléments lors du défilement d'une page. Le plugin est léger et ne charge pas la page.

Le plugin OnePagejQuery OnePage vous permet de diviser une page en écrans séparés d'une hauteur de 100 % et d'animer la transition entre eux. Il suffit d’un léger coup de pouce pour passer à l’écran suivant. Le même effet a été utilisé sur le site promotionnel 5s.
Il y a des problèmes avec, comme avec presque tous les plugins similaires. Si le texte ne rentre pas en hauteur, il est simplement coupé et la barre de défilement n'apparaît pas.

FSVS Fonctionnalité très similaire au plugin précédent. Vous permet de faire défiler les écrans en utilisant CSS3. A un problème similaire lors de la visualisation sur les téléphones. La navigation dans les écrans sous forme de diapositives séparées est possible soit à l'aide du rouleau de la souris, soit en cliquant sur le point de navigation côté.

jInvertScrolljInvertScroll vous permet de créer un défilement de parallaxe horizontal sympa. Pendant que vous faites rouler le rouleau de la souris vers le bas, tous les éléments de la page se déplacent horizontalement et à des vitesses différentes, ce qui crée un effet de parallaxe.

WaypointsWaypoints est un plugin jQuery qui permet d'afficher n'importe quel élément lorsque le visiteur se trouve à un point donné de la page. Par exemple, lorsqu'un visiteur termine la lecture d'un article sur un site Internet et approche de la fin du texte, une fenêtre d'information apparaît sur le côté de la page lui demandant de lire l'article suivant ou un article similaire.

Plugin ScrollocueOriginal pour des tâches spécifiques. Vous permet de vous déplacer dans la page en sélectionnant des blocs par un simple clic droit sur la page. A chaque nouveau clic, l'élément du dessous est mis en surbrillance, faisant ainsi défiler un peu la page. Le défilement avec les touches fléchées du clavier est également pris en charge.

Barre de progression défilanteUne solution intéressante avec laquelle vous pouvez afficher la progression de la lecture des informations sur une page. Il est également possible de diviser le texte en sections et tout cela sera affiché visuellement à n'importe quel endroit qui vous convient sur la page.

multiScroll.jsmultiScroll.js est un plugin jQuery similaire aux deux plugins d'écran coulissant précédents, mais présente une différence significative. Si dans les cas précédents, l'écran était simplement retourné, celui-ci ressemble davantage à un curseur d'image moderne. L'écran est divisé en deux parties égales et celle de gauche défile vers le haut et celle de droite défile vers le bas. De cette façon, le contenu est pratiquement déchiré.
Ce plugin peut être utilisé, par exemple, pour créer un portfolio pour un photographe ou un designer. Je pense que les visiteurs apprécieront votre site.

browserSwipe.jsUn autre plugin de défilement plein écran, avec l'aide duquel vous créez une transition efficace entre les écrans. Les effets disponibles incluent une transition coulissante, une transition avec rotation plein écran, un zoom et un défilement horizontal sur les écrans. Vous pouvez combiner tous les effets sur une seule page.

Plugin de défilement coulissant plein écran jQuery.panelSnap. À première vue, le plugin n’est pas différent des précédents, mais il dispose d’une zone de défilement interne. Si nous faisons défiler jusqu'à la fin du contenu interne, la transition vers l'écran suivant se produit automatiquement. Théoriquement, c'est une solution au problème des sites Web réactifs. Si la fenêtre intérieure est agrandie, sur les petits écrans, le contenu qui ne rentre pas en hauteur ne sera pas perdu.